文章/答案/技术大牛

发布

社区首页 >问答首页 >使用动画Jquery跟随鼠标悬停。

问使用动画Jquery跟随鼠标悬停。
EN

Stack Overflow用户

提问于 2017-10-11 11:51:47

回答 3查看 1.4K关注 0票数 1

我正试图在图像上实现这 mousemove效果。

这些图片看起来像是在跟踪我的鼠标，我正试图跟踪它，直到目前为止，这。我试过这个例子https://jsfiddle.net/lesson8/SYwba/。但我还是坚持要把它和我现在的小提琴结合起来。

这是我想要的output.Like，图片跟随鼠标。输出

$('.animated').hover(
    function() {
        $('.animated').animate({
            marginTop:20
        });
    },
    function() {
        $('.animated').animate({
            marginTop:10
        });
    }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="animated" src="http://via.placeholder.com/350x150"/>

也尝试过这样做：

$(document).mousemove(function(e) {
    $('.logo').offset({
        left: e.pageX,
        top: e.pageY + 20
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="logo" src="//ssl.gstatic.com/images/logos/google_logo_41.png" alt="Google">

javascript

jquery

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-10-11 13:00:37

逻辑实际上非常简单:您要做的是根据光标在document/viewport中的相对位置，将图像与其原始位置相偏移。我们需要在文档上的mousemove事件中执行所有这些计算。

$(document).on('mousemove', function(e) {...});

此外，这意味着您需要以下信息：

确定要将图像从其原始位置移动的最大偏移量。
视口宽度和高度
鼠标/光标将相对定位到视图高度--这将给出0，1的范围。
将该范围转换为-1，1，因为负值用于移动到上/左，正值用于移动到底部/右侧。
使用CSS3变换移动图像

分步指南

1.确定最大偏移量

假设我们想把移动限制在±30‘s。我们可以将其定义为：

// Maximum offset for image
var maxDeltaX = 30,
    maxDeltaY = 30;

2.获取视口尺寸

document.documentElement.clientWidth/clientHeight可以访问视口尺寸

// Get viewport dimensions
var viewportWidth = document.documentElement.clientWidth,
    viewportHeight = document.documentElement.clientHeight;

3和4.获取光标到视口的相对位置。

这里的关键是计算光标与视口的相对位置。首先，我们得到鼠标/光标坐标到视口的分数，这将给我们一个0，1的范围。然而，我们需要将其转换为-1，1，这样我们就可以计算左/顶移动(使用负值)和下/右移动(使用正值)。从0，1到-1，1的算术转换只是简单地乘以2(所以得到0，2)和负1(然后得到-1，1)：

// Get relative mouse positions to viewport
var mouseX = e.pageX / viewportWidth * 2 - 1,
    mouseY = e.pageY / viewportHeight * 2 - 1;

5.使用CSS3 transform定位您的图像

这是最直接的部分。平移量仅为mouseX×maxDeltaX，沿y轴相同.我们将这些值传递给transform: translate(<x>px, <y>px)

// Calculate how much to transform the image
var translateX = mouseX * maxDeltaX,
    translateY = mouseY * maxDeltaY;
$('.animated').css('transform', 'translate('+translateX+'px, '+translateY+'px)');

工作实例

见下文的概念证明：

// Settings
// Maximum offset for image
var maxDeltaX = 30,
    maxDeltaY = 30;

// Bind mousemove event to document
$(document).on('mousemove', function(e) {

  // Get viewport dimensions
  var viewportWidth = document.documentElement.clientWidth,
      viewportHeight = document.documentElement.clientHeight;

  // Get relative mouse positions to viewport
  // Original range: [0, 1]
  // Should be in the range of -1 to 1, since we want to move left/right
  // Transform by multipling by 2 and minus 1
  // Output range: [-1, 1]
  var mouseX = e.pageX / viewportWidth * 2 - 1,
      mouseY = e.pageY / viewportHeight * 2 - 1;
      
  // Calculate how much to transform the image
  var translateX = mouseX * maxDeltaX,
      translateY = mouseY * maxDeltaY;
  $('.animated').css('transform', 'translate('+translateX+'px, '+translateY+'px)');
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img class="animated" src="http://via.placeholder.com/350x150"/>

票数 3

Stack Overflow用户

发布于 2017-10-11 12:25:11

尝试将悬停事件绑定到只想移动图像而不是图像本身的div或某个容器上。

$('.wrapper-div').hover();

票数 0

Stack Overflow用户

发布于 2017-10-11 12:25:36

我就给你个提示

$('.animated').mousemove(
  function(ev) {
    document.getElementById("MouseCoord").innerHTML = ev.clientX + ':' + ev.clientY;
  }
);

window.addEventListener("load", function() {
  var rect = document.getElementById("container").getBoundingClientRect();
  // .toFixed(0) only remove decimal part for a nice display
  document.getElementById("BoxSize").innerHTML = 
    "Box is at (" + rect.left.toFixed(0) + ";" + rect.top.toFixed(0) + ")" +
    " with size " + rect.width.toFixed(0) + "x" + rect.height.toFixed(0);
});

#container {
  width: 400px;
  height: 200px;
  border: .1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p id="MouseCoord">-</p>
<p id="BoxSize">-</p>
<div id="container">
  <img class="animated" src="http://via.placeholder.com/350x150" />
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46687538

复制

相似问题

问使用动画Jquery跟随鼠标悬停。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用动画Jquery跟随鼠标悬停。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用动画Jquery跟随鼠标悬停。
EN