鼠标跟随效果的实现

最新推荐文章于 2021-07-30 09:03:39 发布

敲出真谛

最新推荐文章于 2021-07-30 09:03:39 发布

阅读量909

点赞数

分类专栏： javascript 文章标签：鼠标跟随

本文链接：https://blog.csdn.net/qq_36818627/article/details/81604320

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本篇博客涉及的技术栈包括事件对象、缓动学公式的应用相对比较简单

代码如下

<!DOCTYPE html>
<!--create by ydj on 2018-08-12-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#image{
				width: 99px;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<img src="images/img.jpg" alt="good" id="image"/>
	</body>
</html>
<script>
			var image = document.getElementById("image");
			var leaderX = 0,leaderY = 0,targetX = 0,targetY = 0;
			document.onclick = function(event){
				// 1.事件对象的兼容性处理
				var event = event || window.event;
				// 2.clientX 获取网页的水平坐标
				targetX = event.clientX - image.offsetWidth/2;
				// 3.clientX 获取网页的竖直坐标
				targetY = event.clientY - image.offsetHeight/2;
			}
			
			setInterval(function(){
				// 4.缓动公式
				leaderX = leaderX + (targetX - leaderX) / 10;
        		leaderY = leaderY + (targetY - leaderY) / 10;
        		image.style.left = leaderX + "px";
        		image.style.top = leaderY + "px";
			},10);
</script>

效果图

鼠标点击哪里，图标会跟着运动。

敲出真谛

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标跟随效果的实现

本篇博客涉及的技术栈包括事件对象、缓动学公式的应用相对比较简单代码如下&lt;!DOCTYPE html&gt;&lt;!--create by ydj on 2018-08-12--&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt;
复制链接

扫一扫