html代码大全鼠标跟随

HTML代码大全之鼠标跟随功能，是一个很酷的设计效果，可以充分展示网站主人的设计实力。下面我们来了解一下如何实现这个功能。

// HTML结构div class="box">
      img src="xxx.jpg" alt="">
    /div>
// CSS样式.box {
      position: relative;
      width: 300px;
      height: 200px;
}
.box img {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.5;
     /* 设置图片透明度 */  transition: 0.5s;
 /* 设置过渡效果 */}
    // JS代码var box = document.querySelector('.box');
    var img = document.querySelector('.box img');
box.addEventListener('mousemove', function(e) {
      var x = e.clientX - box.offsetLeft;
     /* 鼠标相对于父元素的x坐标位置 */  var y = e.clientY - box.offsetTop;
     /* 鼠标相对于父元素的y坐标位置 */    img.style.transform = 'translate('+ x +'px, '+ y +'px)';
 /* 设置图片位置跟随鼠标移动 */}
    );
    // 效果展示见右侧演示链接

以上是HTML代码大全鼠标跟随的实现方法，通过CSS样式和JS代码的设置，可以轻松实现网页设计中的鼠标跟随效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！