在鼠标悬停时摇摆不定

Struggling to get swing on mouseover not onload

本文关键字：摇摆不定 悬停 鼠标      更新时间：2023-09-26

我想让这个div只在鼠标悬停时摇摆，而不是在页面加载时摇摆。这是JS:

(function swing() {
var ang  = 20,
    dAng = 10,
    ddAng = .5,
    dir  = 1,
    box = document.getElementById("box");
(function setAng(ang){
    box.style.WebkitTransform =  'rotate('+ang+'deg)';
    box.style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;
    if (Math.abs(ang) > 0)
        setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
})(ang);
box.mouseover = function(){
    box.style.WebkitTransform =  'rotate(-20deg)';
    box.style.MozTransform =  'rotate(-20deg)';
    setTimeout(swing, 1000);
}
})();

可以看到，它在加载时摆动。

这里是JSFiddle: http://jsfiddle.net/qqsLW/

欢呼人

试试这个，这对我有用

(function swing() {
var ang  = 20,
    dAng = 10,
    ddAng = .5,
    dir  = 1,
    box = document.getElementById("box");
function setAng(ang){
    box.style.WebkitTransform =  'rotate('+ang+'deg)';
    box.style.MozTransform =  'rotate('+ang+'deg)';
    dir = -dir;
    if (dAng > 1)
        dAng -= ddAng;
    if (Math.abs(ang) > 0)
        setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
};
box.onmouseover = function(){
    console.log('over');
    box.style.WebkitTransform =  'rotate(-20deg)';
    box.style.MozTransform =  'rotate(-20deg)';
    setTimeout(function(){
        setAng(ang)
    }, 1000);
}

}) ();

将鼠标移出swing函数

如果你还想阻止它立即执行，不要运行swing，即删除()后的定义

相关文章：