<style> *{margin:0; padding:0;} body{background:#FFF7F7;} .img{width:50px; height: 50px; position: absolute; background-image: url("逆水寒/1366X768女.jpg"); background-size: cover;} </style> </head> <body> <div class="img"></div> </body> <script> let img = document.querySelector(".img") let deg = 0 let imgx = 0 let imgy = 0 let imgl = 0 let imgt = 0 let y = 0 let index = 0 window.addEventListener("mousemove",function(xyz){ imgx = xyz.x - img.offsetLeft - img.clientWidth /2 imgy = xyz.y - img.offsetTop - img.clientHeight /2 deg = 360*Math.atan(imgy/imgx)/(2*Math.PI) index= 0 let x = event.clientX if(img.offsetLeft<x){ y=-180 }else{ y=0 } }) setInterval(()=>{ img.style.transform = "rotateZ("+deg+"deg) rotateY("+y+"deg)" index++ if(index<50){ imgl+=imgx/50 imgt+=imgy/50 } img.style.left = imgl+"px" img.style.top = imgt+"px" },10) </script>
时间: 2024-03-08 13:45:10 浏览: 250
框架标记<frame>的属性-HTML网页设计
这段代码看起来像是一个简单的网页特效,使用了CSS和JavaScript来实现图片跟随鼠标移动旋转的效果。具体来说,代码中定义了一个带有背景图片的div元素(class为“img”),然后在JavaScript中监听鼠标移动事件,计算鼠标相对于图片中心点的位置,以此来计算图片需要旋转的角度和方向,并且根据鼠标移动的距离来让图片跟随鼠标移动。最后使用定时器不断更新图片的位置和角度,实现动态效果。
阅读全文