成都创新互联网站制作重庆分公司

js如何实现图片跟随鼠标移动

这篇文章主要介绍“js如何实现图片跟随鼠标移动”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“js如何实现图片跟随鼠标移动”文章能帮助大家解决问题。

创新互联建站长期为超过千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为枣庄企业提供专业的成都网站建设、网站建设枣庄网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

这里列举了两种实现方法:

第一种



	
		
		
		
			img{
				position: fixed;
				left: 0px;
				top: 0px;
			}
		
	
	
		
		
			var img = document.querySelector('img');
			// mousemove鼠标移动事件
			document.addEventListener('mousemove',function(e){
				var pagex = e.pageX-20+'px';
				var pagey = e.pageY-20+'px';
				// console.log(pagex,pagey);
				img.style.left = pagex;
				img.style.top = pagey;
			})
		
	

js如何实现图片跟随鼠标移动


第二种



	
		
		
		
			img{
				position: absolute;
				width: 80px;
			}
		
	
	
		
		
			window.onmousemove = function(e){
				var x = e.pageX;
				var y = e.pageY;
				img.style.left = x+'px';
				img.style.top = y+'px';
			}
		
	

js如何实现图片跟随鼠标移动

关于“js如何实现图片跟随鼠标移动”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


新闻名称:js如何实现图片跟随鼠标移动
文章起源:http://cxhlcq.com/article/jgspdh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部