美文网首页Js系列
JS动画(二)

JS动画(二)

作者: 大海孤了岛 | 来源:发表于2017-03-11 16:18 被阅读12次

    实现鼠标移动改变图片的透明度

    所用知识:
    透明度属性:opacity
    setInterval()方法:设置时间函数

    setInternal
    clearInterval()方法:取消时间函数 clearInterval.png
    实现效果
    animation1.gif
    实现方法:

    定义图像以及设置其初始化透明度属性

     <style>
            #img{
                opacity: 1;
            }
     </style>
    
    <body>
        ![](Animation.jpg)
    </body>
    

    设置鼠标的移动事件

    window.onload = function () {
                //检查是否支持getElementById方法
                if (! document.getElementById) return false;
                //获取到img元素
                var img = document.getElementById("img");
                //设置鼠标移入事件
                img.onmouseover = function () {
                    startMove(50)
                };
                //设置鼠标移出事件
                img.onmouseout = function () {
                    startMove(100)
                }
            };
    

    设置时间函数

            //定义一个time事件,以便取消时间事件
            var timer = null;
            //设置一个临时变量,用来存取当前img的透明度
            var alpha = 0;
            function startMove(target) {
                //获取到img元素
                var img = document.getElementById("img");
                //取消其他time事件,防止鼠标多次的移入移出产生异常的效果
                clearInterval(timer);
                //设置time事件,每30ms执行一次
                timer = setInterval(function (){
                    var speed = 0;
                    //当前透明度超过目标值,则应该减少,速度设置为负数,否则速度设置为正数
                    if (alpha > target){
                        speed = -10;
                    } else {
                        speed = 10;
                    }
                    //达到目标值时,取消时间函数
                    if (alpha == target){
                        clearInterval(timer);
                    }
                    //否则,继续改变透明度,并为img元素设置其属性
                    else {
                        alpha += speed;
                        img.style.opacity = alpha / 100;
                    }
                },30);
            }
    

    完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Animation</title>
    
        <style>
            #img{
                opacity: 1;
            }
        </style>
    
        <script>
            window.onload = function () {
                //检查是否支持getElementById方法
                if (! document.getElementById) return false;
                //获取到img元素
                var img = document.getElementById("img");
                //设置鼠标移入事件
                img.onmouseover = function () {
                    startMove(50)
                };
                //设置鼠标移出事件
                img.onmouseout = function () {
                    startMove(100)
                }
            };
    
            //定义一个time事件,以便取消时间事件
            var timer = null;
            //设置一个临时变量,用来存取当前img的透明度
            var alpha = 0;
            function startMove(target) {
                //获取到img元素
                var img = document.getElementById("img");
                //取消其他time事件,防止鼠标多次的移入移出产生异常的效果
                clearInterval(timer);
                //设置time事件,每30ms执行一次
                timer = setInterval(function (){
                    var speed = 0;
                    //当前透明度超过目标值,则应该减少,速度设置为负数,否则速度设置为正数
                    if (alpha > target){
                        speed = -10;
                    } else {
                        speed = 10;
                    }
                    //达到目标值时,取消时间函数
                    if (alpha == target){
                        clearInterval(timer);
                    }
                    //否则,继续改变透明度,并为img元素设置其属性
                    else {
                        alpha += speed;
                        img.style.opacity = alpha / 100;
                    }
                },30);
            }
        </script>
    
    </head>
    <body>
        ![](Animation.jpg)
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:JS动画(二)

        本文链接:https://www.haomeiwen.com/subject/swoagttx.html