jquery實現的提示浮層跟隨鼠標移動

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery實現的提示浮層跟隨鼠標移動

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.poluoluo.com/jslib/jquery/jquery.js"></script> 
</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("<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特效代碼

當jQuery1.7遇上focus方法的問題: jQuery中有一個focus()方法能設置對象的焦點，在1.7以下的版本中，不管對象是不是disa
JS不能跨域借助jquery獲取IP地址的方法教程: 獲取IP地址，JS也可以獲取客戶端IP地址啦，大家知道JS不能跨域，所以這裡借助了jquery，真的
最新jQuery引用google地址外部文件(jquery 1.2.6至jquery1.7.2): 1. 很多網站都是使用這種方式引入，客戶的浏覽器可能已經緩存過了 jquery。可以直接調用本地的，

DIV CSS 佈局教程網

相關文章