JQ捕获鼠标当前坐标

时间:2014-04-08  发布人:SHX  浏览次数:2281  评论:0

jQuery可用于确定鼠标指针在屏幕上的位置。这里给大家分享一个如何创建一个工具提示,它将在特定元素上当前鼠标指针位置处显示。
HTML代码

<div id="tip" style="display:none;">YaY! I ma a tooltip</div>
<div class="hoverMe">Hover me for a tooltip.</div>
<div>This div will not display a tooltip.</div>
<div class="hoverMe">Hover me for a tooltip.</div>

CSS样式简单写下

div
{
   border:1px solid black;
   float:left;
   width:200px;
   height:200px;
   margin:10px;
   font-size:14px;
}
div#tip
{
   position:absolute;
   width:100px;
   height:auto;
}

最后我们写下JQ代码

$(document).ready(function()
{
   $('.hoverMe').hover(
     function()
     {
       $('#tip').fadeIn('slow');
      },
     function()
     {
       $('#tip').fadeOut('slow');
     }
   );
   $('.hoverMe').mousemove(function(e)
   {
     var topPosition = e.pageY+5;
     var leftPosition = e.pageX+5;
     $('#tip').css({
       'top': topPosition + 'px',
       'left': leftPosition + 'px',
     })
   }
   )
});

效果:如果将鼠标悬停在第一个和最后一个DIV元素上,将显示一个工具有淡入淡出效果的工具提示。该工具提示也将跟随鼠标指针一起移动。

返回

上一篇:英文单词网页上的翻译插件下一篇:HTML5精选案例展示

我要评论

    loading
 

关闭

loading

回顶部