教程集 > jQuery > jquery 教程 > 正文 jquery实现的提示浮层跟随鼠标移动

jquery实现的提示浮层跟随鼠标移动

发布时间：2013-08-28 编辑：jiaochengji.com

提示浮层跟随鼠标移动(jquery版)

提示浮层跟随鼠标移动(jquery版) jquery实现：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>jquery实现简单文字提示</title> 
<style type="text/css"> 
#preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;} 
</style> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> 
</head> 
<body> 
把鼠标放到这里1 
<br><br><br> 
把鼠标放到这里2 
<br><br><br> 
把鼠标放到这里3 
<br><br><br> 
把鼠标放到这里4 
<br><br><br> 
把鼠标放到这里5 
<script type="text/javascript"> 
this.imagePreview = function(){ 
/* CONFIG */ 
xOffset = 10; 
yOffset = 30; 
// 可以自己设定偏移值 
/* END CONFIG */ 
$("a.preview").hover(function(e){ 
$("body").append("<div id='preview'>jquery实现简单文字提示</div>"); 
$("#preview") 
.css("top",(e.pageY - xOffset) + "px") 
.css("left",(e.pageX + yOffset) + "px") 
.fadeIn("slow"); 
}, 
function(){ 
$("#preview").fadeOut("fast"); 
}); 
$("a.preview").mousemove(function(e){ 
$("#preview") 
.css("top",(e.pageY - xOffset) + "px") 
.css("left",(e.pageX + yOffset) + "px"); 
}); 
}; 
// 页面加载完执行 
$(document).ready(function(){ 
imagePreview(); 
}); 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章：
jquery实现的提示浮层跟随鼠标移动
 jQuery powerFloat
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
jQuery powerFloat万能浮动层下拉层插件使用介绍
 Jquery实现鼠标移上弹出提示框、移出消失思路及代码
 Jquery创建层显示标题和内容且随鼠标移动而移动
 jquery 文字浮动提示效果(示例)
js随机漂浮广告代码示例
 Jquery写一个鼠标拖动效果实现原理与代码
 CSS实现跟随滚动条漂浮层

上一篇：jQuery 添加/移除CSS类实现代码下一篇：jQuery插件 tabBox实现代码

[关闭]

jquery实现的提示浮层跟随鼠标移动

最近更新

浏览排行