趣味はプログラミングします.JavaScript.

3008 ワード

花がなくて、この瞬間に破壊されますか?野火も暖かくなりますか?花火なしで一緒にお祝いしてもいいですか?
今回の授業は主にどのように花を回転させますか?
花というのは、一枚の写真です.JavaScriptではどのような方法で一枚の写真を回転させることができますか?ゆっくり話しましょう.まず、これらの単語を勉強します.rotate(回転)、document(ドキュメント)、interval(間隔)、tranform(変更).続いていくつかの語句を学びます.var imageName=document.getElement ById(「imagid」);この方法は、documentオブジェクトからidに合う画像を選択して、私たちが定義した画像オブジェクト名に保存します.このようにしてこそ、私たちは後でそれを呼び出すことができます.setInterval(function(){}、10);この方法はタイマーの方法で、方法には二つのパラメータがあります.一つは方法で、一つは数字です.数字は私達が方法を実行する間隔です.ここは10ミリ秒です.つまり10ミリ秒ごとに伝わる方法です.image Name.style.msTrans form=「rotate-90」//IE 9ブラウザimagName.style.MozTrans form=「rotate(-90 deg)」//Firefoxブラウザimage Name.style.webkit Trans form=「rotate(-90 deg)」//Safari and Chromeブラウザimage Name.style.OTsform=「tate」//Operaブラウザ上の文は写真を回転させる文で、ブラウザごとに異なる実行文を持っています.-90 dgeは回転の度数を指しています.最後にコードを付けます.

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