停止javascript div旋转
这是一个使div旋转的脚本。。 现在我尝试只进行一次旋转并停止脚本。。你能帮助我吗？ 如何使此脚本仅停止一次旋转？ 我不熟悉这种编程语言。。D:停止javascript div旋转,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是一个使div旋转的脚本。。 现在我尝试只进行一次旋转并停止脚本。。你能帮助我吗？ 如何使此脚本仅停止一次旋转？ 我不熟悉这种编程语言。。D: <body style="-webkit-transform: rotate(0deg);"> <div id="wrap"> <p>some content</p> <script type="text/JavaScript">
<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>
一些内容
函数getTransformProperty（元素）{
var属性=['transform'、'msTransform'、'webkitttransform'、'MozTransform'、'OTransform']；
var-p；
while（p=properties.shift（））{
if（typeof element.style[p]！=“未定义”）{
返回p；
}
}
返回false；
}
var div=document.getElementById（'wrap'）；
var属性=getTransformProperty（div）；
如果（财产）{
var d=0；
setInterval（函数（）{div.style[property]='rotate（'+（d++%360）+'deg）；}，10）；
}
间隔来完成
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仅用于延迟显示效果
setTimeout（函数（）{
document.getElementById（“包装”）.classList.add（“旋转”）；
}, 1000);
#换行{
-webkit转换：-webkit转换1s；
转变：转变1s；
}
#旋转{
-webkit变换：旋转（360度）；
-ms变换：旋转（360度）；
变换：旋转（360度）；
}
一些内容
这是旋转div的一种非常奇怪的方式。你考虑过使用类转换或CSS动画吗？@JonathanBrooks你是对的，也许这不是制作动画的最佳方式，但为了解决这个问题，就知识水平而言，他了解如何处理间隔就足够了。你可以清除它们，停下来them@JonathanBrooks实际上我不想开始深入的讨论，但我想和你们分享这个链接，因为你们在谈论良好的实践等等。。所以，请你解释一下为什么这应该是正确的答案？我真的不明白为什么人们认为使用css转换真的很好。我会说，这足以建立一个滑块，但它绝对不是理想的，当谈到性能。这听起来可能很可笑，因为每个人都知道css是由gpu驱动的，但是他们忘记了，gpu正在计算道具，而缓慢的渲染过程是由布局引擎完成的。。这就是HTML5游戏不使用css动画的原因。。因为他们真的很烂这是个错误的结论。您不是在用js修改css，而是在修改html元素属性。CSS和元素的样式是不同的。。在我看来，代码在一个地方时可读性更好。。而不是三年后。。比如给它一个js类，搜索25个css文件。。对于这门课。。。但我同意好的代码是可读和可维护的。。谁将维护您的25个css文件？？你会的，你的一生；）嘿，拜托，我看过complext js动画。。例如，绿色股票。。你看过复杂的css动画吗。。好的，淡入/淡出。但几年前，我做了一个完全响应css动画人物，它很复杂。我以300-400loc的SASS（为了更容易修改）加上用于类处理的JS结束。。我花了大约200行代码用纯JS重写了它，它有更多的特性和更好的可读性。。就像我说的，我不想惹你，也不想讨论。我刚刚体验了css动画。。但是如果你喜欢的话。。是的，你是对的，这是因为d++首先返回最后一个值，然后再递增。。我将编辑代码。