700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js实现图片跟随鼠标移动

js实现图片跟随鼠标移动

时间:2022-04-10 09:01:20

相关推荐

js实现图片跟随鼠标移动

首先挑选好自己心意的动图:

1.在自己的html里面添加img标签,把该图片放进去。

2.给图片设置position:fixed 、z-index:1让图片始终保持在最顶层

<style>#img_MouseMove{width:xxxpx;height:xxxpx;position:fixed;z-index:1;visibility: hidden;/*隐藏图片*/}</style><img src="图片地址" id="img_MouseMove">

通过js实现鼠标移入html窗口时,该图片跟随鼠标移动,鼠标移出窗口该图片从窗口消失

//首先获取img标签var img = document.getElementById("img_MouseMove");//鼠标移入窗口//1.图片可见//2.通过鼠标移动事件获取鼠标的坐标//3.设置图片的top和left,可以跟随鼠标移动window.onmouseover = function(e){img.style.visibility = "visible";img.style.top = e.clientY + "px";img.style.left = e.clientX + "px";}//鼠标移除窗口//图片消失window.onmouseout = function(){img.style.visibility = "hidden";}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。