如何在鼠标悬停在图像上时暂停动画
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/
【讨论】:
以上是关于如何在鼠标悬停在图像上时暂停动画的主要内容,如果未能解决你的问题,请参考以下文章