如何在鼠标悬停在图像上时暂停动画

Posted

技术标签:

【中文标题】如何在鼠标悬停在图像上时暂停动画【英文标题】:How to pause the animation on mouse hover on image 【发布时间】:2018-05-18 22:13:46 【问题描述】:

我需要帮助来停止鼠标悬停动画并继续鼠标悬停。请参阅下面的 url 以查看代码。谢谢

http://jsfiddle.net/AbdiasSoftware/F8x4p/

        $(window).load(function()
        var pos = $('#center').position(),
        radiusSat = $('#sat1').width() * 0.5,
        radius = $('#center').width() * 0.5,
        cx = pos.left + radius,
        cy = pos.top + radius,
        x, y, angle = 0, 
        angles = [],
        spc = 360 / 25,
        deg2rad = Math.PI / 180,
        i = 0;

    for(;i < 25; i++) 
        angles.push(angle);
        angle += spc;
    

    /// space out radius
    radius += (radiusSat + 25);

    loop();

    function loop() 
    for(var i = 0; i < angles.length; i++) 

        angle = angles[i];

        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css(left:x - radiusSat, top:y - radiusSat);


    angles[i] += 0.1;
        if (angles[i] > 360) angles[i] = 0;
    

    requestAnimationFrame(loop);


);

【问题讨论】:

相关:***.com/questions/10735922/… 【参考方案1】:

试试这个-

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 5,
    deg2rad = Math.PI / 180,
    i = 0;

for(;i < 5; i++) 
    angles.push(angle);
    angle += spc;

stop();
/// space out radius
radius += (radiusSat + 10);
$("#center").mouseover(function()
   start();
);
$("#center").mouseout(function()
   stop();
);

var requestId;

function loop(time) 
    requestId = undefined;

   for(var i = 0; i < angles.length; i++) 

        angle = angles[i];
        
        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css(left:x - radiusSat, top:y - radiusSat);
    
        angles[i] = angles[i] + 1;
        if (angles[i] > 360) angles[i] = 0;
    
    
    //requestAnimationFrame(loop);

    stop();


function stop() 
    if (!requestId) 
       requestId = window.requestAnimationFrame(loop);
    


function start() 
    if (requestId) 
       window.cancelAnimationFrame(requestId);
       requestId = undefined;
    
div 
    border-radius:50%;
    border:2px solid #000;
    position:fixed;

#center 
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    

#sat0, #sat1, #sat2, #sat3, #sat4 
    width:50px;
    height:50px;
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="center"></div>
<div id="sat0"></div>
<div id="sat1"></div>
<div id="sat2"></div>
<div id="sat3"></div>
<div id="sat4"></div>

【讨论】:

【参考方案2】:

您可以创建一个变量来跟踪鼠标是否在里面,并使用事件来更改变量。

首先,将您的标记包装在一个包含的 div 中,以便可以轻松地将事件侦听器应用于所有元素:

<div class="container">
  <div id="center"></div>
  <div id="sat0"></div>
  <div id="sat1"></div>
  <div id="sat2"></div>
  <div id="sat3"></div>
  <div id="sat4"></div>
</div>

然后添加一个名为mouseEntered 的新变量,并将其设置为false

然后创建两个事件监听器——一个在鼠标进入容器时将mouseEntered变量设置为true,一个在鼠标离开时将其设置为false

document.querySelector('.container').addEventListener('mouseenter', function() 
    mouseEntered = true
)
document.querySelector('.container').addEventListener('mouseleave', function() 
    mouseEntered = false
)

最后,将除requestAnimationFrame 之外的所有内容都包装在loop 函数中,并在if 语句中检查mouseEntered 是否为false

function loop() 
    if (mouseEntered === false) 
      for(var i = 0; i < angles.length; i++) 

          angle = angles[i];

          x = cx + radius * Math.cos(angle * deg2rad);
          y = cy + radius * Math.sin(angle * deg2rad);

          $('#sat' + i).css(left:x - radiusSat, top:y - radiusSat);

          angles[i] = angles[i] + 1;
          if (angles[i] > 360) angles[i] = 0;
      
    

    requestAnimationFrame(loop);

修改更改:http://jsfiddle.net/pbobbr5h/

【讨论】:

以上是关于如何在鼠标悬停在图像上时暂停动画的主要内容,如果未能解决你的问题,请参考以下文章

当鼠标不再悬停在悬停动画上时,悬停动画会立即停止吗?

jQuery - 当鼠标悬停在元素上时,如何继续动画?

如何暂停和恢复轮播滑块

将鼠标悬停在图像上时如何更改 SVG 的颜色?

在鼠标悬停时播放 Gif 并在鼠标移出时暂停 Gif 而不替换图像?

如何在悬停时暂停引导轮播并在鼠标悬停时恢复它?