javascript - 间隔性动画如何设置鼠标移入停止鼠标移出继续呢

Question

 var box = document.getElementById('well_teacher_box1');
    var angle=0;
    var timeInterbox = null;
    function startMove(){
        timeInterbox = setInterval(function(){
            degMove();
        },10)
    }
    var timebox = setTimeout(function(){
        startMove();
    },3000);
    
    function degMove(){
        angle+=1;
        setCss3(box,{transform:"rotateX("+angle+"deg)"});
        if(angle % 45 == 0){
            clearInterval(timeInterbox);
            var timebox = setTimeout(function(){
                startMove();
            },3000);    
        }else{
            angle+=1;
            setCss3(box,{transform:"rotateX("+angle+"deg)"});
        }    
    }
    function setCss3 (obj,attrObj) {
        for (var i in attrObj) {
             var newi=i;
             if(newi.indexOf("-")>0){
                var num=newi.indexOf("-");
                newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
             }
             obj.style[newi]=attrObj[i];
             newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
             obj.style["webkit"+newi]=attrObj[i];
             obj.style["moz"+newi]=attrObj[i];
             obj.style["o"+newi]=attrObj[i];
             obj.style["ms"+newi]=attrObj[i];
        }
    }

Answer 1

按着你的思路写了一个：

        var box   = document.getElementById('rotate')
        var angle = 0
        var timer = null

        function startMove() {
            console.log('startMove');
            timer = setInterval(doMove, 60)
        }

        function stopMove() {
            console.log('stopMove');
            clearInterval(timer)
        }

        function doMove() {
            angle += 1
            setCSS3(box, {'transform': 'rotateX('+ angle +'deg)'})
        }

        function setCSS3(obj, attrObj) {
            for (var attr in attrObj) {
                if (!attrObj.hasOwnProperty(attr)) {
                    continue
                }
                var newAttr = attr
                if (attr.indexOf('-') > -1) {
                    var num = attr.indexOf('-')
                    newAttr = attr.replace(attr.substring(num, num + 2), attr.substring(num + 1, num + 2).toUpperCase())
                }
                obj.style[newAttr] = attrObj[attr]
                newAttr = newAttr.replace(/(\w)/, function (match) {
                    return match.toUpperCase()
                })
                obj.style['webkit' + newAttr] = attrObj[attr]
                obj.style['moz' + newAttr]    = attrObj[attr]
                obj.style['ms' + newAttr]     = attrObj[attr]
                obj.style['o' + newAttr]      = attrObj[attr]
            }
        }
        box.onmouseover = function () {
            startMove()
        }
        box.onmouseout = function () {
            stopMove()
        }

有两个问题：

• 用 setInterval 不好，要想怎么用 setTimeout 来代替。

• 后面的 obj.style['webkit' + newAttr] 在浏览器里面并没有起作用。

Answer 2

鼠标移入时停止 clearTimeout，鼠标移出时继续 setTimeout