Question

当鼠标悬停在图像上方时，我正在尝试移动图像。这是an exemple。移动悬停图片时，文本会顺着鼠标移动，这正是我要的内容。

你有什么主意吗？

我尝试的问题是，当我离开紫罗兰色的盒子时，图像一直在移动。（我宁愿避免在图像上停留时创建一个框并识别出来）。

$("#containerScaled").on('mousemove', '.box', function (e) {
    $("#followC").css("top", e.clientY)
        .css("left", e.clientX);
});

<style>
    #containerScaled, #followC {

        transition: all 0.9s ease-out;
        transform-origin: center;
        transform: scale(1, 1);
    }
    .box {
        height:50px;
        width:50px;
        left: 500px;
        top: 50px;
        background-color: blueviolet;
        position: absolute;
    }
    .mouseFollow {
        position: fixed;
        width:70px;
        height:20px;
        font-size:12px;
        pointer-events:none;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
    <div class="box">test</div>
</div>
<div id="followC" class="mouseFollow"><img src=" image "/></div>

Answer 1

我认为您应该首先根据您的麋鹿在矩形内的位置更改位置，如下所示：

  if (e.clientX > width/2){
    addX = 20;
  }
  if(e.clientX < width/2){
    addX = -20;
  }
  if(e.clientY > height/2){
    addY = 20;
  }
  if(e.clientY < height/2){
    addY = -20;
  }

这是第一步，实际上是使鼠标“跟随”某些东西。

我认为您可以进行一些优化，以使动画更加清晰，但基本上就是这样。

我还添加了

    $("#containerScaled").on('mouseleave', '.box', function(e) {

      $("#followC").css("top", "50%").css("left", "50%");

    });

这样，一旦您离开:hover区域，您的元素就会回到其原始位置

由于这个原因，我还使您可以将鼠标悬停在透明的区域，将鼠标悬停在移动的元素上，这样当您将鼠标悬停在移动的元素上时，就不会离开鼠标悬停区域并触发mouseleave

.box{
  background-color: transparent;
}

.boxcolored{
  position: absolute;
  height: 100px;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: green;
}

$("#containerScaled").on('mousemove', '.box', function(e) {

      var left = parseFloat($(".box").css("left"));
      var right = parseFloat($(".box").css("top"));
      var width = parseFloat($(".box").css("widht"));
      var height = parseFloat($(".box").css("height"));


      var addX = 0;
      var addY = 0;

      if (e.clientX > width/2){
        addX = 20;
      }
      if(e.clientX < width/2){
        addX = -20;
      }
      if(e.clientY > height/2){
        addY = 20;
      }
      if(e.clientY < height/2){
        addY = -20;
      }
              $("#followC").css("top", e.clientY + addY)
        .css("left", e.clientX + addX);
      });




    $("#containerScaled").on('mouseleave', '.box', function(e) {

      $("#followC").css("top", "50%").css("left", "50%");

    });

#containerScaled {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: red;
}

#followC {
  transition: all 0.9s ease-out;
  transform-origin: center;
}

.box {
  position: absolute;
  height: 100px;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: transparent;
}
.boxcolored{
  position: absolute;
  height: 100px;
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: green;
}

.mouseFollow {
  position: relative;
  height: 20px;
  width: 75px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="containerScaled" class="container">
  <div class="boxcolored"></div>
  <div id="followC" class="mouseFollow">HALLO</div>
  <div class="box">mouse me</div>
</div>

Answer 2

以红色虚线框出的框是悬停区域。黄色框是可视区域，它是字母可以移动到的极限范围的近似值。

存在滞后和偏移。滞后归因于transition: 0.9s，偏移量是left和top。可以减少滞后时间，但要以平滑的运动为代价。有四个字母在不同的过渡时间进行比较。请注意，它们都停在同一位置（当鼠标不再在虚线框内移动时），只是过渡越慢，鼠标离开虚线框后发生的移动就越多。

由于只有两个位置有效，所以偏移量更难：x：右侧或左侧，y：顶部或底部。如果需要将字母放在一个方框内，则将悬停区域的边框和背景保持在none并显示偏移量（可视区域）。

注意：请勿在紧凑模式下查看此演示，而应在整页模式（正常尺寸）下查看它

$(".target").on('mousemove', function(e) {
  $(".text").css({
    "top": e.clientY,
    "left": e.clientX
  });  
});

main {
  position:relative;
  font: 400 16px/1.2 Arial;
}

.zone {
  position: absolute;
  z-index: 1;
  height: 120px;
  width: 110px;
  margin: 90px 0 0 90px;
  background: gold;
  color:white;
  text-align:right;
}

.target {
  position: absolute;
  z-index: 2;
  height: 100px;
  width: 100px;
  margin: 75px;
  outline: 3px dashed red;
  color:red
}

.text {
  position: absolute;
  z-index: 3;
  top: 90px;
  left: 90px;
  font-size: 32px;
  color:black
}

.A {
  transition: all 0.9s ease-out;
}

.B {
  transition: all 0.6s ease-out;
}
  
.C {
  transition: all 0.3s ease-out;
}

<main>
  <section class="target">Hover Area</section>
    <aside class="text A">A</aside>
    <aside class="text B">B</aside>
    <aside class="text C">C</aside>
    <aside class="text D">D</aside>
  <section class='zone'><b>Visual Area</b></section>
</main>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

鼠标悬停移动图像位置

2 个答案: