WonderCSS

利用 jQuery 实现鼠标单击页面弹出提示窗口

之前发布过《实现选取文字出现浮动框的JS方式》这篇文章,无论在竞价站或是优化站都有其实际作用。毕竟当用户划字选词时,往往对当前文章有兴趣或是打算copy下来,然后浮动出一个提示窗口可进行交互。那么再进一步、再无耻些 =。= ,无需用户划选文字,用户只要在文章中单击下页面后,也能在鼠标附近弹出提示窗口能实现么?今天我们就来解决这个问题。

利用jQuery实现鼠标单击页面弹出提示窗口

以页面中文章的容器 class 为 “PageArticle” 为前提,HTML代码部分为:


<div class="PageArticle">
	文章内容,JS作用本容器内,鼠标单击即可弹出图片窗口。
</div>

首先我们需要加载一个jquery库,然后在页面中再加载下面JS代码:


<script type="text/javascript">
$(document).ready(function(){
    if($(".PageArticle").length==1){
    var div=$(".PageArticle").get(0);
    div.onmouseup=mouseMove;
    }
    })
document.write('<div class="box2" id="popup" style="display:none;position:absolute;left:0;top:0;z-index:1" ><a href="http://www.wondercss.com"><img src="images/button.gif" alt="" /></a></div>');
function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  }
  else if (document.getSelection) {
    return document.getSelection();
  }
  else if (document.selection) {
    return document.selection.createRange().text;
  }
}
function mouseMove(ev) 
{ 
  var text=getSelectedText();
  if(text==""){
    var ct=$("#popup").css('display');
    if(ct=='block'){
      $("#popup").css('display','none');
      return true;
    }
  }
  ev= ev || window.event; 
  var mousePos = mouseCoords(ev); 
  $("#popup").css('display','block');
  var left=$(this).offset().left;
  var top=$(this).offset().top;
  $('.box2').css('left',mousePos.x);
  $('.box2').css('top',mousePos.y+10);
  return {x:mousePos.x,y:mousePos.y}
} 
function mouseCoords(ev) 
{ 
  if(ev.pageX || ev.pageY){ 
    return {x:ev.pageX, y:ev.pageY}; 
  } 

  if(window.ActiveXObject){
    return { 
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
    y:ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
    };
  }else{
    return { 
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
    y:ev.clientY + document.body.scrollTop - document.body.clientTop 
    };
  }
}
</script>

By 于湛 发布于 2013.11.10 2,683 次浏览

利用 jQuery 实现鼠标单击页面弹出提示窗口》上有1条评论

  1. Limingzhe

    看来也是做医疗站的一个同行啊,看了你网站很多竞价站的实用内容,有模板分享么?

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注