图像旋转到宽离开我的屏幕如何保持静态或缩短宽度

image rotation going to wide off of my screen how to keep static or shorten width?

本文关键字：静态 何保持 屏幕 旋转 离开 我的 图像      更新时间：2023-09-26

大家好，我想知道是否有人能快速修复我的图像旋转到离屏幕很远的地方，并导致我的应用程序有滚动条，不吸引眼球，也许图像只是旋转到位，使我的格式化问题更容易

这是我的代码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之间正确换行。

相关文章：