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

 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) {

展开

收起

杨冬芳 2016-06-23 14:33:51 2803 0

2 条回答

写回答

取消提交回答

杨冬芳

IT从业

按着你的思路写了一个：

        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] 在浏览器里面并没有起作用。

2019-07-17 19:46:16

赞同展开评论打赏

西秦说云

码农|Coder| Pythonista

        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] 在浏览器里面并没有起作用。

2019-07-17 19:46:16

赞同展开评论打赏

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

相关电子书