• 鼠标移入移出透明度变化效果


    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style style="text/css">
            *{
                margin:0;
                padding:0;
            }
            #div1{
                width:200px;
                height: 200px;
                background: red;
                filter:alpha(opacity:30); /* 兼容IE */
                opacity: 0.3;
            }
        </style>
        <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover = function(){
                startMove(100);
            }
            oDiv.onmouseout = function(){
                startMove(30);
            }
        }
        var timer = null;
        var alpha = 30;
        function startMove(iTarget){
            var oDiv = document.getElementById('div1');
            clearInterval(timer);//防止定时器叠加
            timer = setInterval(function(){
                var speed = 0;
                if(alpha > iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }
                if(alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha += speed;
                    oDiv.style.filter = 'alpha(opacity:'+alpha+')';
                    oDiv.style.opacity = alpha/100;
                }
            },30)
        }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>
  • 相关阅读:
    个人总结21
    个人总结08
    个人总结07
    构建之法读后感01
    学习进度表 03
    四则运算3
    求最大值
    学习进度表02
    四则运算 2
    学习进度表01
  • 原文地址:https://www.cnblogs.com/clear93/p/5239380.html
Copyright © 2020-2023  润新知