【前端】javascript實現鼠標跟隨特效

時間 2019-12-08

標籤前端 javascript 實現鼠標跟隨特效欄目 JavaScript 简体版

原文原文鏈接

實現效果:javascript

實現代碼:css

<!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.jshtml

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
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。