實現效果: 實現代碼: myScroll.js ...
實現效果:
實現代碼:
<!DOCTYPE html>
<html>
<head>
<title>滑鼠跟隨</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 5000px;
}
div{
position: absolute;
border: 1px solid #ccc;
cursor: pointer;
width: 100px;
height: 100px;
background-color: #03c03c;
opacity: 0.8;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript" src="myScroll.js"></script>
<script type="text/javascript">
// 滑鼠跟隨
// pageY和pageX的ie67ie相容寫法
// 在頁面的位置 = 看得見的 + 看不見的
// pageY/pageX = event.clientY/clientX + scroll().top/scroll().left
var obj = document.getElementsByTagName("div")[0];
var timer = null;
var targetX = 0,
targetY = 0,
leaderX = 0,
leaderY = 0;
// 給整個文檔綁定點擊事件獲取滑鼠位置
document.onclick = function(event){
// 相容獲取事件對象
event = event || window.event;
// 滑鼠在頁面的位置 = 被捲去的部分 + 可視區域部分
var pageY = event.pageY || scroll().top + event.clientY;
var pageX = event.pageX || scroll().left + event.clientX;
targetY = pageY - obj.offsetHeight/2;
targetX = pageX - obj.offsetWidth/2;
// 清除定時器
clearInterval(timer);
timer = setInterval(function(){
// X,先左右,後上下
// 為盒子的位置獲取值
leaderX = obj.offsetLeft;
// 獲取步長
var stepX = (targetX - leaderX)/10;
// 二次處理步長
stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
leaderX = leaderX + stepX;
// 賦值
obj.style.left = leaderX + "px";
// Y
leaderY = obj.offsetTop;
var stepY = (targetY - leaderY)/10;
stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
leaderY = leaderY + stepY;
obj.style.top = leaderY + "px";
}, 30);
}
</script>
</body>
</html>
myScroll.js
function scroll() { // 開始封裝自己的scrollTop
if(window.pageYOffset !== undefined) { // ie9+ 高版本瀏覽器
// 因為 window.pageYOffset 預設的是0,所以需要判斷
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode === "CSS1Compat") {// 標準瀏覽器,來判斷有沒有聲明DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {// 未聲明 DTD
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
