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

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

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

所谓的花花呢,其实就是一张图片,在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是指旋转的度数,可以改。
最后上代码:


<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> 

你可能感兴趣的:(javascript)