链式运动

最新推荐文章于 2018-10-19 11:17:15 发布

Apress92

最新推荐文章于 2018-10-19 11:17:15 发布

阅读量251

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513095

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:100px;
            height:100px;
            background-color: red;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        /**
         * Created by zhanghaibin on 16/12/5.
         */
        function getStyle(obj,attr) {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        };
        function startMove(obj,attr,target,fn) {
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
                var iCur=0;
                if(attr=='opacity'){
                    iCur=parseInt(parseFloat(getStyle(obj,attr)*100));
                }else{
                    iCur=parseInt(getStyle(obj,attr));
                }
                var speed=(target-iCur)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(iCur==target){
                    clearInterval(obj.timer);
                    if(fn()){
                        fn();
                    }
                }else{
                    if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:'+(iCur+speed)+')';
                        obj.style.opacity=(iCur+speed)/100;
                    }else{
                        obj.style[attr]=iCur+speed+'px';
                    }
                };
            },30)
        };
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            oDiv.onmouseover=function(){
                startMove(oDiv,'width',300,function () {
                    startMove(oDiv,'height',300,function () {
                        startMove(oDiv,'opacity',100)
                    });
                })
            };
            oDiv.onmouseout=function(){
                startMove(oDiv,'opacity',30,function () {
                    startMove(oDiv,'height',100,function(){
                        startMove(oDiv,'width',100);
                    })
                })
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

Apress92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
链式运动

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> #div1{ width:100px; height:100px; background-color: red;
复制链接

扫一扫

专栏目录