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

问题描述

问 题

 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];
        }
    }

解决方案

按着你的思路写了一个：

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

这篇关于javascript - 间隔性动画如何设置鼠标移入停止鼠标移出继续呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！