javascript元素滑鼠跟隨效果程式碼例項詳解

admin發表於2017-04-05
JavaScript

本章節分享一段程式碼例項，它實現了元素滑鼠跟隨效果。

也就是元素會跟隨滑鼠移動的位置，下面就詳細介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  margin:0; 
  padding:0
}
#to_top{
  width:80px;
  height:40px;
  padding:20px;
  font:14px/20px arial;
  text-align:center;
  background:#06c;
  position:absolute;
  cursor:pointer;
  color:#fff
}
</style>
<script>
window.onload = function(){
  var oTop = document.getElementById("to_top");
  document.onmousemove = function(evt){
    var oEvent = evt || window.event;
    var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
    oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
  }
}
</script>
</head>
<body>
<a href="softwhy.com">螞蟻部落</a>
<div id="to_top">softwhy.com</div>
</body>
</html>

上面的程式碼實現了跟隨效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oTop = document.getElementById("to_top")，獲取id屬性值為to_top的元素物件。

（3）.document.onmousemove = function(evt){}，為document註冊onmousemove事件處理函式。

（4）.var oEvent = evt || window.event，實現了事件物件的瀏覽器相容。

（5）.var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft，獲取頁面向左滾動的尺寸。

（6）.var scrolltop = document.documentElement.scrollTop || document.body.scrollTop，獲取頁面向上滾動的尺寸。

（7）.oTop.style.left = oEvent.clientX + scrollleft +10 +"px"，設定元素的left屬性值，這個值是滑鼠在客戶區的座標加上頁面向左滾動的座標，然後再加10px，這個10px就是滑鼠指標和元素的距離。

二.相關閱讀:

（1）.onmousemove事件可以參閱javascript mousemove 事件一章節。

（2）.var oEvent = evt || window.event可以參閱var ev=window.event||ev的作用是什麼一章節。

（3）.scrollLeft可以參閱js scrollLeft一章節。

（4）.clientX可以參閱javascript clientX一章節。

相關文章