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

ttx9n · 发表于 2010-2-11 12:21:23

提示浮层跟随鼠标移动(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> 
 
</head> 
<body> 
<a class="preview">把鼠标放到这里1</a> 
<br><br><br> 
<a class="preview">把鼠标放到这里2</a> 
<br><br><br> 
<a class="preview">把鼠标放到这里3</a> 
<br><br><br> 
<a class="preview">把鼠标放到这里4</a> 
<br><br><br> 
<a class="preview">把鼠标放到这里5</a> 
<script type="text/javascript"> 
this.imagePreview = function(){ 
/* CONFIG */ 
xOffset = 10; 
yOffset = 30; 
// 可以自己设定偏移值 
/* END CONFIG */ 
$("a.preview").hover(function(e){ 
$("body").append("jquery实现简单文字提示"); 
$("#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需刷新才能执行]

dm00ji1s · 发表于 2022-11-27 21:39:23

女生看了弄丢了卡萨诺的卡洛斯

leidie123a · 发表于 2022-12-23 19:28:24

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

leidie123a · 发表于 2023-3-4 07:08:36

管灌灌灌灌灌灌灌灌灌灌

64000928 · 发表于 2023-5-5 08:18:39

额风风风微风微风违法

mkonji · 发表于 2023-8-22 12:56:45

很不错的样子

0vwrdf6 · 发表于 2023-8-24 17:26:29

逛逛看看瞧瞧

e8hwl6prw · 发表于 2023-8-30 04:47:02

大家都不容易！

额呵呵 · 发表于 2023-9-8 16:49:55

而非为吾问无为谓娃娃

9jduu05 · 发表于 2023-9-17 08:39:05

可以，看卡巴

账号		自动登录	找回密码
密码			立即注册

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

相关帖子