ホームページ > 記事 > ウェブフロントエンド > フロントエンド実践 - JavaScript - アニメーション (2)

フロントエンド実践 - JavaScript - アニメーション (2)

黄舟オリジナル: 2016-12-30 16:29:08966ブラウズ

透明アニメーション

効果を達成：画像に数回移動すると。画像にはグラデーション効果があり、マウスを離れると元の画像効果が復元されます。

答え:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>透明度动画</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        #div1{
            width:200px;
            height:200px;
            background:red;
            filter:alpha(opacity:30);
            opacity:0.3;            
        }
    </style>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById(&#39;div1&#39;);
            oDiv.onmouseover = function(){
                startMove(100);
            }
            oDiv.onmouseout = function(){
                startMove(30);
            }
        }
        var timer = null;
        var alpha = 30;
        function startMove(iTarget){
            var oDiv = document.getElementById(&#39;div1&#39;);
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = 0;
                if(alpha > iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha = alpha + speed;
                    oDiv.style.filter = &#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;
                    oDiv.style.opacity = alpha/100;
                }
            },30)
        }
    </script>
</head>

<body>
    <div id="div1"></div>
</body> 
</html>

上記は、フロントエンド演習 - JavaScript - アニメーション (2) の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) を参照してください。！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：フロントエンド実践 - JavaScript - アニメーション (1)次の記事：フロントエンド実践 - JavaScript - アニメーション (1)

続きを見る

フロントエンド実践 - JavaScript - アニメーション (2)

関連記事