任意值运动框架

最新推荐文章于 2020-11-25 15:33:49 发布

Apress92

最新推荐文章于 2020-11-25 15:33:49 发布

阅读量400

点赞数

分类专栏： javascript

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

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div{
         width:200px;
         height:200px;
         background-color:red;
         margin-top:50px;
         filter:alpha(opacity:30);
         opacity: 0.3;
      }
   </style>
   <script>
        function getStyle(obj,attr) {
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        window.onload=function () {
            var oDiv=document.getElementsByTagName('div');
            for(var i=0; i<oDiv.length;i++){
                oDiv[i].timer=null;
               oDiv[i].onmouseover=function(){
                   startMove(this,'opacity',100)
            };
                oDiv[i].onmouseout=function(){
                    startMove(this,'opacity',30)
                }
            };
            function startMove(obj,attr,target) {
                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);
                    }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)
            };
        }
   </script>
</head>
<body>
   <div></div>
</body>
</html>

Apress92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任意值运动框架

html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> div{ width:200px; height:200px; background-color:red; margin-top:50px;
复制链接

扫一扫

专栏目录