首頁手記 JavaScript動畫之透明度漸變

JavaScript動畫之透明度漸變

標簽：

Html/CSS JavaScript

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/demo4.css">
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../js/demo4.js"></script> -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: #6cccf2;
            opacity: 0.3;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var box = document.getElementById('box');
            box.onmouseover=function(){
                startChange(100);
            };
            box.onmouseout=function(){
                startChange(30);
            };
        };
        var timer = null;
        function startChange(oTarget){
            var speed = 0;
            var box = document.getElementById('box');
            var alpha = box.style.opacity*100;
            if(alpha<oTarget){
                speed=10;
            }else if(alpha>oTarget){
                speed= -10;
            }
            clearInterval(timer);
            timer = setInterval(function(){
                alpha = alpha + speed;
                box.style.opacity = alpha/100;
                if(alpha===oTarget){
                    clearInterval(timer);
                }
            },30);
        }
    </script>
</head>
<body>
    <div class="wrap">
        <div id="box"></div>
    </div>
</body>
</html>

點擊查看更多內容