鼠標(biāo)跟隨，顧名思義，就是在鼠標(biāo)移動(dòng)的時(shí)候，有個(gè)動(dòng)畫(huà)跟隨著鼠標(biāo)一起移動(dòng)。
要點(diǎn)一：
var oevent = evt || window.event;
這個(gè)是為了兼容ie和ff而寫(xiě)的，在ie下window.event表示event對(duì)象，而ff下，是給事件函數(shù)傳一個(gè)參數(shù)，這個(gè)參數(shù)就表示事件對(duì)象。
要點(diǎn)二：
document.onmousemove = function(evt)
鼠標(biāo)跟隨是在鼠標(biāo)移動(dòng)時(shí)發(fā)生的事情。
要點(diǎn)三：
document.documentelement.scrolltop || document.body.scrolltop;
這是為了兼容chrome和其它瀏覽器，滾動(dòng)條距上邊滾動(dòng)的距離，chrome用后邊那個(gè)，其它瀏覽器用前面那個(gè)。
要點(diǎn)四：
otop.style.top=oevent.clienty+scrolltop+10+px;
當(dāng)鼠標(biāo)移動(dòng)時(shí)把鼠標(biāo)的當(dāng)前位置賦值給元素的位置值。
oevent.clienty即為鼠標(biāo)的當(dāng)前y坐標(biāo)的位置，加scrolltop的距離是要在滾動(dòng)到不是第一屏的時(shí)候，鼠標(biāo)跟隨效果依然不改變而寫(xiě)。
代碼如下:
<!doctype html>
<html>
<head>
<meta charset=utf-8 />
<title>無(wú)標(biāo)題文檔</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
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 style=height:1000px;>
<a href=#>文字</a>
<div id=to_top>鼠標(biāo)跟隨</div>
</body>
</html>
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：