完美运动框架以及微博案例

最新推荐文章于 2019-08-03 08:15:04 发布

Alex十年

最新推荐文章于 2019-08-03 08:15:04 发布

阅读量184

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79636600

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>完美运动框架</title>
        <script src="move2.js"></script>
        <style>
            #div1{width: 100px;height: 100px;background: red; filter:alpha(opacity:30);opacity: 0.3;}
        </style>
                <script>
            window.onload=function(){
                var oDiv = document.getElementById('div1');
                oDiv.onmouseover=function(){
                    startMove(oDiv,{width:300,height:300,opacity:100});
                }
                oDiv.onmouseout=function(){
                    startMove(oDiv,{width:100,height:100,opacity:30});
                }
            }           
        </script>
    </head>
    <body>
        <div id='div1'>         
        </div>
    </body>
</html>

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]; 
    }
} 

function startMove(obj,json,fn){ 
    clearInterval(obj.time);
    obj.time=setInterval(function(){
        //当有没运动到的，就不关闭定时器，假设所有的值都到了
        var bStop = true;
        //使用json，是为了使多个属性可以同时运动，方法就是遍历json,使其多次执行其中的代码
        //此时也不能够使用target,而是等于json中设定的值
        //当有一个值到达目标点时就会清除定时器，此时就会使运动停止，
        //而其他的运动还没有到达指定位置，此时就是出现的bug
        for(var attr in json){
            var curr=0;
            if(attr=='opacity'){
                curr = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                curr = parseInt(getStyle(obj,attr));
            }

            var speed = (json[attr]-curr)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);     

            if(curr!=json[attr]){
                 bStop=false;
            }              

            if(attr=='opacity'){
                //记得加括号
                obj.style.filter = 'alpha(opacity:'+(curr+speed)+')';
                obj.style.opacity = (curr+speed)/100;
            }else{
                obj.style[attr] = curr+speed+'px';
            }   

        }
        if(bStop){
            clearInterval(obj.time);
            if(fn)fn();
        }

        },30);

}

微博运动案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>微博运动案例</title>
        <style>
            *{margin: 0;padding: 0;}
            #oUl{width: 300px;height: 500px;border: 1px solid brown;margin:20px auto;}
            #oUl li{border-bottom: 1px dashed brown;padding: 4px;
                 list-style-type: none; filter:alpha(opacity:0);opacity: 0;}
        </style>
        <script type="text/javascript" src="move2.js" ></script>
        <script>
            window.onload = function(){
            var oInput = document.getElementById('input1');
            var oBtn = document.getElementById('btn');
            var oUl = document.getElementById('oUl');
            var oLi1 = oUl.getElementsByTagName('li');

                oBtn.onclick=function(){
                    var oLi = document.createElement('li');
                    oLi.innerHTML=oInput.value;
                    oInput.value='';
                    if(oLi1.length>0){
                        oUl.insertBefore(oLi,oLi1[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }
                    //运动
                    var iHeight = oLi.offsetHeight;
                    oLi.style.height=0;
                    startMove(oLi,{height:iHeight,opacity:100});
                }

            }

        </script>
    </head>
    <body>
        <textarea id='input1' rows="4" cols="30"></textarea>
        <button id='btn'>发布</button>
        <ul id='oUl'>

        </ul>
    </body>
</html>

Alex十年

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
完美运动框架以及微博案例

html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;完美运动框架&lt;/title&gt; &lt;script src="move2.js"&gt;&amp
复制链接

扫一扫