JS 图片跟随鼠标移动拉伸的动画效果

最新推荐文章于 2024-07-23 16:20:42 发布

Ricolo

最新推荐文章于 2024-07-23 16:20:42 发布

阅读量464

点赞数

分类专栏：前端文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_43710544/article/details/114033364

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

想做个hover文字（hover的文字不同图片也不同），就可以出现下面效果的动画：
在这里插入图片描述
一开始思路就是，在文字的mousemove事件里面计算鼠标位置，然后不断生成图片，图片的位置就是鼠标的位置，但是这样写不顺滑。

原因是因为mousemove的触发频率不高。

优化了一下代码：

  let beindex = -1;
  var aimX = null;
  var aimY = null;
  var currentX = null;
  var currentY = null;
  var img = null;
  var index;
  document.addEventListener('mousemove',
    function (event) {
      aimX = event.pageX;
      aimY = event.pageY;
      if (currentX === null) {
        currentX = event.pageX;
        currentY = event.pageY;
      }
    });
    
  $(".col-md-5 h4").mousemove(function (e) {
    index = $(".col-md-5 h4").index(this);
    if (index >= 5) index -= 5;
    if (beindex != index) $(".imgs").empty();
    img = 1;
    beindex = index;
    console.log(currentX, aimX);
  });
  $("#last").mouseenter(function (e) {
    $(".imgs").empty();
    img = 0;
  });
 
  $("#intro").mouseenter(function (e) {
    $(".imgs").empty();
    img = 0;
  });

  const draw = function () {
    if (currentX) {
      if (img) {
        $(".imgs").append(
          `<img src="./image/${index+1}.jpg" style="position: absolute; width: 300px; top:${currentY}px; left: ${currentX}px;">`
        );
      }
      
      currentX = currentX + (aimX -
        currentX) * 0.1;
      currentY = currentY + (aimY -
        currentY) * 0.1;
    }
    requestAnimationFrame(draw);
  }

  draw();