Home >Web Front-end >JS Tutorial >Front-end practice--JavaScript--animation (2)

Front-end practice--JavaScript--animation (2)

黄舟Original: 2016-12-30 16:29:081026browse

Transparency Animation

Achieve the effect: when moved to the picture several times. The image has a gradient effect; when the mouse leaves, the original image effect is restored.

Answer:

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

The above is the content of front-end practice--JavaScript--animation (2). For more related content, please pay attention to the PHP Chinese website ( www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Front-end practice--JavaScript--animation (1)Next article：Front-end practice--JavaScript--animation (1)

See more

Front-end practice--JavaScript--animation (2)

Related articles