大家好,我想知道是否有人能快速修复我的图像旋转到离屏幕很远的地方,并导致我的应用程序有滚动条,不吸引眼球,也许图像只是旋转到位,使我的格式化问题更容易
这是我的代码JS-
<head>
<script>
var looper;
var degrees = 0;
function rotateAnimation(el,speed){
var elem = document.getElementById(el);
if(navigator.userAgent.match("Chrome")){
elem.style.WebkitTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Firefox")){
elem.style.MozTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("MSIE")){
elem.style.msTransform = "rotate("+degrees+"deg)";
} else if(navigator.userAgent.match("Opera")){
elem.style.OTransform = "rotate("+degrees+"deg)";
} else {
elem.style.transform = "rotate("+degrees+"deg)";
}
looper = setTimeout('rotateAnimation(''+el+'','+speed+')',speed);
degrees++;
if(degrees > 359){
degrees = 1;
}
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
</script>
</head>
HTML
<body>
<div data-role="page" id="pageone">
<img id="img1" src="http://s8.postimg.org/h719p5x85/transimage.png" alt="cog1">
<script>rotateAnimation("img1",15);</script>
</body>
正如markE所说,将变换原点设置为图像的中心,因此如下所示:
elem.style.transform-origin = "50% 50%";
elem.style.transform = "rotate("+degrees+"deg)";
您也可以在代码中使用-ms和-webkit来实现这一点,以实现交叉兼容性。
稍微不相关,我建议使用:
degrees = degrees%360;
而不是从359度到1度的if语句。这是因为它在更普遍的情况下会起作用,所以不太可能坏掉。例如,如果您将度数no更改了+1,但更改了+10或-10,则它仍然会在0和360之间正确换行。