运动之淡入淡出 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #img1{filter:alpha(opacity:30);/*filter是给IE用到*/opacity:.3; width:300px;}
    </style>
</head>
<body>
<img src="../1.jpg" alt="" id="img1">
</body>
</html>
<script type="text/javascript">
    window.onload = function () {
        var oImg = document.getElementById("img1");
        oImg.onmouseover = function () {
            startMove(100);
        }
        oImg.onmouseout = function () {
            startMove(30);
        }
    }
    var timer = null;
    var alpha = 30;
    function startMove(iTarget) {//通过目标点来计算速度
        var oImg = document.getElementById("img1");
        clearInterval(timer);
        timer = setInterval(function () {
            var iSpeed = 0;
            if(alpha<iTarget){
                iSpeed = 10;
            }else{
                iSpeed = -10;
            }
            if(alpha ==iTarget){
                clearInterval(timer)
            }else{
                alpha+=iSpeed;
                document.title = alpha;
                oImg.style.filter = "alpha(opacity:"+alpha+")";
                oImg.style.opacity = alpha/100;

            }
        },30)
    }
</script>

 

posted @ 2016-11-02 14:34  最爱小虾  阅读(178)  评论(0)  编辑  收藏  举报