运动值任意框架

最新推荐文章于 2020-07-17 20:17:15 发布

tianshizhimeng155

最新推荐文章于 2020-07-17 20:17:15 发布

阅读量428

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/u013267266/article/details/51005629

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        div{
            width:150px;
            height:150px;
          float:left;
            background:green;
            margin:20px;
        }
        #div2{
            filter:alpha(opacity:30);
            opacity:0.3;
        }
        </style>
        <script>
        window.οnlοad=function(){
            var oDiv1=document.getElementById('div1');
            var oDiv2=document.getElementById('div2');
            oDiv1.οnmοuseοver=function(){
                move(this,'width',300);
            }
            oDiv1.οnmοuseοut=function(){
                move(this,'width',150);
            }
             oDiv2.οnmοuseοver=function(){
                move(this,'opacity',100);
            }
            oDiv2.οnmοuseοut=function(){
                move(this,'opacity',30);
            }
            function getStyle(obj,name)
            {
                if(obj.currentStyle)
                {
                    return obj.currentStyle[name];
                }
                else
                {
                    return getComputedStyle(obj, false)[name];
                }
            }
            function move(obj,attr,target)
            {
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    if(attr=="opacity")
                    {
                        var cur=Math.round(parseInt(getStyle(obj,attr)*100));
                        console.log(cur);
                    }
                    else
                    {
                        var cur=parseFloat(getStyle(obj,attr));
                        console.log(cur);
                    }
                 
                 var speed=(target-cur)/6;
                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
                 if(cur==target)
                 {
                    clearInterval(obj.timer);
                 }
                 else
                 {
                    if(attr=="opacity")
                    {
                        cur+=speed;
                        obj.style.filter="alpha(opacity:"+cur+")";
                        obj.style[attr]=cur/100;
                    }
                    else
                    {
                         cur+=speed;
                          obj.style[attr]=cur+"px";
                    }
                  
                 }
                }, 50)
            }
        }
        </script>
    </head>
    <body>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    </body>
</html>

tianshizhimeng155

关注

0
点赞
踩
0

收藏

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

div{ width:150px; height:150px; float:left; background:green; margin:20px; } #div2{ filter:alpha(opacity:30);
复制链接

扫一扫

专栏目录