jQuery大圖跟隨效果程式碼例項

antzone發表於2017-12-28
jQuery

滑鼠放在產品的小圖上的時候，出現一個可以跟隨滑鼠指標移動的大圖。

下面通過例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>大圖跟隨效果程式碼-螞蟻部落</title>
<style type="text/css"> 
li{
  list-style:none;
  height:262px;
  width:350px;
  border:5px solid #F60;
} 
#tooltip{
  position:absolute;
} 
#newTip{
  text-align:center;
  font-size:12px;
}
</style> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script> 
$(function(){ 
  var x=10; 
  var y=20; 
  $("a.tooltip").hover(function(){ 
    var title=this.title; 
    var $div=$("<div id='newTip'><img src='"+this.href+"'/><br/>"+title+"</div>"); 
    $("body").append($div); 
    $div.css({"position":"absolute","background":"silver"}).show("fast"); 
  },function(){ 
    $("#newTip").remove(); 
  }).mousemove(function(e){ 
    var $div= $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}); 
  }); 
}) 
</script>
</head> 
<body> 
<ul> 
<li>
  <a href="mytest/jQuery/big.jpg" class="tooltip" title="自然風光">
    <img src="mytest/jQuery/small.jpg" border="0"/>
  </a>
</li> 
</ul> 
</body> 
</html>

當滑鼠在小圖中移動的時候，能夠出現一個大圖跟隨滑鼠移動，下面介紹一下實現過程。

一.實現原理:

當滑鼠放在小圖上的時候，能夠動態建立一個div物件節點，此節點中包含有大圖，當滑鼠離開小圖的時候，常見的節點物件會被刪除。同時為小圖註冊mousemove事件處理函式，當滑鼠在小圖中移動的時候，能夠將建立的div的left和top屬性值設定為e.pageX+x和e.pageY+y，之所以要加x和y是為了讓大圖和滑鼠指標之間有一定的距離。

二.程式碼註釋:

（1）.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var x=10，var y=20，用於規定滑鼠指標和大圖左上角的距離。

（3）.$("a.tooltip").hover(function(){})，為class屬性值為tooltip的連結註冊hover事件處理函式。

（4）.var title=this.title;，將連結的title屬性賦值給變數title。

（5）.var $div=$("<div id='newTip'><img src='"+this.href+"'/><br/>"+title+"</div>")，建立一個節點物件，裡面包含有<img>,它的src屬性就是連結的href屬性值，並且在圖片下面顯示title值。

（6）.$("body").append($div)，在body中新增建立的此節點物件。[

（7）.$div.css({"position":"absolute","background":"silver"}).show("fast")，將建立的div設定為絕對定位，並且背景色為silver。

（8）.$("#newTip").remove()，移除建立的div節點物件。

（9）.mousemove(function(e){})，註冊mousemove事件處理函式，e為事件物件。

（10）.var $div= $("#newTip").css({"left": (e.pageX+x)+'px',"top": (e.pageY+y)+'px'}).show("fast")，設定div的left和top屬性值。

三.相關閱讀:

（1）.hover事件參閱jQuery hover事件一章節。

（2）.append()參閱jQuery append()一章節。

（3）.css()參閱jQuery css()一章節。

（4）.remove()參閱jQuery remove()一章節。

（5）.mousemove事件參閱jQuery mousemove事件一章節。

相關文章