【前端】javascript实现鼠标跟随特效

2018-06-24 00:39:29来源：未知阅读 ()

实现效果:

实现代码:

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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有