鼠标跟随效果的实现

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

代码如下

<!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
    评论
可以使用 JavaScript 和 CSS 实现小球跟随鼠标效果。具体实现步骤如下: 1. 在 HTML 中添加一个小球元素: ```html <div id="ball"></div> ``` 2. 在 CSS 中设置小球的样式,包括大小、颜色、圆角等: ```css #ball { position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 50%; z-index: 9999; } ``` 3. 在 JavaScript 中添加事件监听器,监听鼠标移动事件,并获取鼠标的坐标: ```javascript var ball = document.getElementById('ball'); document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; }); ``` 4. 计算小球应该距离页面左边和顶部的距离,并将其设置为小球的样式: ```javascript var ball = document.getElementById('ball'); document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; var ballX = x - ball.offsetWidth / 2; var ballY = y - ball.offsetHeight / 2; ball.style.left = ballX + 'px'; ball.style.top = ballY + 'px'; }); ``` 完整的代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球跟随鼠标</title> <style> #ball { position: absolute; width: 20px; height: 20px; background-color: red; border-radius: 50%; z-index: 9999; } </style> </head> <body> <div id="ball"></div> <script> var ball = document.getElementById('ball'); document.addEventListener('mousemove', function(event) { var x = event.clientX; var y = event.clientY; var ballX = x - ball.offsetWidth / 2; var ballY = y - ball.offsetHeight / 2; ball.style.left = ballX + 'px'; ball.style.top = ballY + 'px'; }); </script> </body> </html> ``` 这样,就实现了小球跟随鼠标效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值