js实现图片跟随鼠标移动效果

最新推荐文章于 2023-09-08 18:50:39 发布
最新推荐文章于 2023-09-08 18:50:39 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： js简单案例 文章标签： 跟随鼠标移动效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41224512/article/details/86427369
版权 
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#box {
			width: 1000px;
			height: 600px;
			background: #cecece;
			margin: 20px auto;
		}
		
		img{
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #f00;
			position: absolute;
		}
	</style>
</head>

<body>
	<div id="box">
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
		<img src="img/1.png" class="img"/>
	</div>
	<script type="text/javascript">
		window.onload = function() {
			var oBox = document.getElementById("box");
			var oImg=document.getElementsByClassName("img");
			
			oBox.onmousemove = function(e) {
				var e = e || window.event;
				var left = e.clientX;
				var top = e.clientY;

				//console.log(left, top);
				//设置oImg偏移量
				//oImg.style.left = left + "px";
				//oImg.style.top = top + "px";
				oImg[0].style.left=left + "px";
				oImg[0].style.top=top + "px";
				
				for(var i=oImg.length-1;i>0;i--){
					oImg[i].style.left=oImg[i-1].style.left;
					oImg[i].style.top=oImg[i-1].style.top;
				}
			}
		}
	</script>
</body>
fengGer的bugs
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js图片跟随鼠标移动效果
猿码互联
06-03 875
要实现图片跟随鼠标移动的效果，可以使用JavaScript原生的mousemove事件以及CSS的transform属性。在以上代码中，我们监听container元素的mousemove事件。当鼠标在container内移动时，获取鼠标相对container的坐标(mouseX和mouseY)。然后，根据container的宽度和高度计算出图片应该移动的距离(imageX和imageY)。最后，使用CSS的transform属性将图片移动到对应的位置上。
图片随鼠标移动（JS）
06-16
兼容多浏览器，我已在实际中用了，很棒，图片随着鼠标移动而移动。
js实现图片跟随鼠标移动
黄大仙
08-08 6957
鼠标不断移动,使用鼠标移动事件:mousemove 在页面中移动:给document注册事件 图片要移动距离,而且不占位置,使用绝对定位 核心原理:每次鼠标移动,我们都会获得最新的坐标,把这个坐标作为图片的left和top - <!-- 鼠标不断移动,使用鼠标移动事件:mousemove 在页面中移动:给document注册事件 图片要移动距离,而且不占位置,使用绝对定位 核心原理:每次鼠标移动,我们都会获得最新的坐标,把这个坐标作为图片的left和top --> <!DOCTYPE ht
js特效——根据鼠标位置移动的图片
最新发布
qq_52430605的博客
09-08 2109
看到别人的网站上有这种特效，便打算学习后自己做出来
JavaScript网页内图片跟随鼠标移动
m0_53162363的博客
06-18 486
【代码】JavaScript网页内图片跟随鼠标移动。
JS 图片跟随鼠标移动
weixin_50784508的博客
06-11 362
【代码】JS 图片跟随鼠标移动。
javascript实现图片跟随鼠标移动效果的方法
10-24
主要介绍了javascript实现图片跟随鼠标移动效果的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下
js实现图片放大并跟随鼠标移动特效
10-17
在网页设计中，为了提升用户体验，常常需要实现一些动态效果，比如图片放大并跟随鼠标移动的特效。这种特效常见于电商网站的商品展示，用户可以通过鼠标移动来预览商品的细节。本文将详细介绍如何使用JavaScript来...
JS图片跟随鼠标
m0_53602804的博客
02-07 165
记一记
js图片跟随鼠标移动
01-12
直接下载后直接另存为html，然后修改里面的图片链接即可
js实现鼠标跟随运动效果
10-19
主要为大家详细介绍了js实现鼠标跟随运动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js图片跟随鼠标移动点击放大图片3D展示
11-03
原生js图片跟随鼠标移动点击放大图片3D展示 原生js图片跟随鼠标移动点击放大图片3D展示
JS html5实现跟随鼠标移动而散开的粒子效果.zip
07-05
JS html5实现跟随鼠标移动而散开的粒子效果
在固定区域内，图片随着鼠标移动而移动
12-29
上述功能是根据html+js+jquery共同完成的，兼容任何浏览器
JS实现图片跟随鼠标移动
weixin_30902675的博客
11-27 158
在实现这个特效之前，需要了解JS中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里。 我们用到的只有这个对象的两个属性，clientX与clientY，就是触发当前事件(可能是Click,也肯能是onmousemove等等事 件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性，所以只能get,不能set)，说到这里可能很多童鞋已经知道怎么...
js:图片随鼠标移动的方法
iteye_11736的博客
09-04 184
仅写出我知道的两种方法 方法一： $(document).mousemove(function(e){ $("span").text(e.clientX + ", " + e.clientY); var x =e.clientX; var y = e.clientY; document....
js 鼠标跟随
weixin_46287150的博客
11-26 953
js 鼠标跟随 可根据点击按下事件改为 按下跟随 松开即回归原位 css代码 <style> *{ margin: 0; padding: 0; } div{ width: 50px; height: 50px; background-color: orangered; border-radius: 50
【JS】鼠标跟随
点滴记忆
07-19 196
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; he...
通过 CSS 和 JavaScript 实现摄像头跟随鼠标移动的效果
05-18
要实现摄像头跟随鼠标移动的效果，可以使用CSS的`transform`属性和JavaScript的`mousemove`事件来实现。 首先，在HTML中创建一个包含摄像头的容器元素，例如： ```html <div class="camera-container"> <video id="camera"></video> </div> ``` 然后，在CSS中设置容器元素的宽度和高度，以及摄像头的位置，例如： ```css .camera-container { position: relative; width: 640px; height: 480px; } #camera { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translate(-50%, -50%); } ``` 这里的关键是将摄像头的位置设置为绝对定位，并使用`transform: translate(-50%, -50%);`将其居中对齐。 接下来，在JavaScript中监听`mousemove`事件，并计算出鼠标相对于容器元素的位置，然后使用`transform: translate()`将摄像头移动到相应的位置。代码如下： ```javascript var cameraContainer = document.querySelector('.camera-container'); var camera = document.querySelector('#camera'); cameraContainer.addEventListener('mousemove', function(event) { var x = event.clientX / cameraContainer.offsetWidth; var y = event.clientY / cameraContainer.offsetHeight; camera.style.transform = 'translate(' + (x * 50 - 25) + '%, ' + (y * 50 - 25) + '%)'; }); ``` 这里使用`event.clientX`和`event.clientY`获取鼠标的坐标，然后将其除以容器元素的宽度和高度，得到相对于容器元素的位置比例。最后使用`transform: translate()`将摄像头移动到相应的位置。 完整的代码示例可以参考下面的代码片段： ``` .camera-container { position: relative; width: 640px; height: 480px; } #camera { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translate(-50%, -50%); } ``` ``` <div class="camera-container"> <video id="camera" autoplay></video> </div> <script> var cameraContainer = document.querySelector('.camera-container'); var camera = document.querySelector('#camera'); cameraContainer.addEventListener('mousemove', function(event) { var x = event.clientX / cameraContainer.offsetWidth; var y = event.clientY / cameraContainer.offsetHeight; camera.style.transform = 'translate(' + (x * 50 - 25) + '%, ' + (y * 50 - 25) + '%)'; }); navigator.mediaDevices.getUserMedia({ video: true }) .then(function(stream) { camera.srcObject = stream; }) .catch(function(error) { console.error(error); }); </script> ``` 注意，这里还使用了`navigator.mediaDevices.getUserMedia()`获取摄像头的视频流，并将其赋值给`<video>`元素的`srcObject`属性，以便显示摄像头的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值