停止javascript div旋转

这是一个使div旋转的脚本。现在我试图只做一个旋转，并停止脚本。你能帮我吗?我怎样才能停止这个脚本只有一个旋转?我是这门编程语言的新手。D:

<body style="-webkit-transform: rotate(0deg);">
    <div id="wrap">
        <p>some content</p>
        <script type="text/JavaScript">
            function getTransformProperty(element) {
                var properties = ['transform', 'msTransform', 'WebkitTransform', 'MozTransform' , 'OTransform'];
                var p;
                while (p = properties.shift()) {
                    if (typeof element.style[p] != 'undefined') {
                        return p;
                    }
                }
                return false;
            }
            var div = document.getElementById('wrap');
            var property = getTransformProperty(div);
            if (property) {
                var d = 0;
                setInterval(function () {div.style[property] = 'rotate(' + (d++ % 360) + 'deg)';}, 10);
            }
        </script>
    </div>

当然，您可以通过清除interval来完成。

if (property) {
    var d = 0;
    interval = setInterval(function () {
       d++;
       div.style[property] = 'rotate(' + (d % 360) + 'deg)';
       if (d == 360) clearInterval(interval); // clearInterval if 360deg reached.. 
    }, 10);
}

你的方法不理想。最好的办法是使用CSS类转换，如下所示:

//setTimeout is merely for delaying the effect for display purposes
setTimeout(function(){
    document.getElementById("wrap").classList.add("rotate");
}, 1000);

#wrap {
    -webkit-transition: -webkit-transform 1s;
            transition: transform 1s;
}
#wrap.rotate {
    -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
            transform: rotate(360deg);
}

<div id="wrap">
<p>some content</p>
</div>

更少的代码!

相关内容

最新更新

热门标签：