趣味编程--JavaScript--让花花转不停

最新推荐文章于 2024-01-26 20:25:42 发布

原创最新推荐文章于 2024-01-26 20:25:42 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #编程 #图片

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现图片旋转的方法。通过设置定时器并利用不同浏览器的transform属性，可以使图片按照指定的角度进行连续旋转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没有花
这刹那被破坏吗
无野火都会温暖吗
无烟花一起庆祝好吗
—–《不浪漫罪名》

本次课主要是讲如何让花花旋转起来

所谓的花花呢，其实就是一张图片，在JavaScript中我们可以使用什么方法让一张图片旋转起来呢？我们慢慢来讲。
首先我们学一下这几个单词：
rotate （旋转），document（文档），interval（间隔），transform（改变）。
接着学习几个语句：
var imageName=document.getElementById(“imageId”);
这个方法是从document对象中选取匹配id的图片，存储在我们定义的图片对象名称中。只有这样我们之后才能对其进行调用。
setInterval(function() {}，10）;
这个方法是定时器的方法，方法里面有两个参数，一个是方法，一个是数字。数字呢就是我们执行方法的间隔，这里是10毫秒，也就是说我们每隔10毫秒执行传进来的方法。
imageName.style.msTransform = “rotate(-90deg)”//IE 9 浏览器
imageName.style.MozTransform = “rotate(-90deg)”//Firefox 浏览器
imageName.style.webkitTransform = “rotate(-90deg)”//Safari and Chrome 浏览器
imageName.style.OTransform = “rotate(-90deg)”//Opera 浏览器
上面的语句是使图片旋转起来的语句，每一种浏览器拥有不一样的执行语句，-90dge是指旋转的度数，可以改。
最后上代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>花花旋转</title>
    </head>
    <body>
        <img id="flower"  src="Image/sflower3.png" />
        <!-- 写自己的图片路径-->
        <script>
            var f = document.getElementById("flower");
            var r=1;
            setInterval(function() {
                f.style.webkitTransform = "rotate("+r+"deg)"
                r=r+1;
                /*f.style.MozTransform = "rotate(-90deg)"
                f.style.msTransform = "rotate(-90deg)"
                f.style.OTransform = "rotate(-90deg)"*/
            }, 10)
        </script>
    </body>
</html>