图片匀速淡入淡出效果（纯js）

来源：互联网发布：sass编译是什么源码编辑：程序博客网时间：2024/05/24 06:50

图片匀速淡入淡出效果如下：
这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>淡入效果</title>    <style>        * {            margin: 0;            padding: 0;        }        div {            border: 2px solid #aaa;        }        img {            width: 300px;            height: 300px;            filter: alpha(opacity:30);            opacity: .3;            margin: 0 auto;        }    </style></head><body><div>    <img src="img/timg.jpg" alt="" id="img"></div><script>    var alpha=30;    var img = document.getElementById("img");    img.onmouseover=function(){        startMove(100)    };    img.onmouseout=function(){        startMove(30)    }    var timer;    function startMove(tar) {        var img = document.getElementById("img");        clearInterval(timer);        timer = setInterval(function () {            var ispeed=0;            ispeed= alpha<tar?5:-5;            if(alpha==tar){                clearInterval(timer)            }            else{                alpha+=ispeed;                img.style.filter="alpha(opacity:"+alpha+")";                img.style.opacity=alpha/100;            }        }, 30)    }</script></body></html>

阅读全文

0 0