JQ捕获鼠标当前坐标
时间：2014-04-08 发布人：SHX 浏览次数：3060 评论：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精选案例展示
