js完美运动之微博发布效果

<style>
        body{padding: 0; margin: 0;}
        #ul1{width: 400px; height: 400px; border: 1px solid black;margin: 10px auto; overflow: hidden;}
        #ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none; opacity: 0; filter:alpha(opacity:0); overflow: hidden;}
    </style>
<script src="move.js"></script>
function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name]; 
    }
}
//startMove(oDiv,{width:120,height:300,opacity:100},function(){ alert("结束");});
function startMove(obj,json,fnEnd){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var bStop=true; //假设:所有的值都已经执行到了目标结果
        for(var attr in json){
            var cur = 0;
            if(attr=="opacity"){
                cur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                cur = parseInt(getStyle(obj,attr));
            }
            var speed=(json[attr]-cur)/6;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(cur!=json[attr]){
                bStop=false;
            }
            if(attr=="opacity"){
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style[attr]=(cur+speed)/100;
            }else{
                obj.style[attr]=cur+speed+"px";
            }
        }
        if(bStop){
            clearInterval(obj.timer);
            if(fnEnd)fnEnd();
        }
    },30);
}
<script>
        window.onload=function(){
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("ul1");
            var oTxt = document.getElementById("txt1");
            oBtn.onclick=function(){
                var oLi = document.createElement("li");
                oLi.innerHTML=oTxt.value;
                oTxt.value="";
                if(oUl.children.length>0){
                    oUl.insertBefore(oLi,oUl.children[0]);
                }else{
                    oUl.appendChild(oLi);
                }
                //运动
                var iHeight=oLi.offsetHeight;
                oLi.style.height='0';
                startMove(oLi,{height:iHeight},function(){
                    startMove(oLi,{opacity:100});
                });
            };
        };
    </script>
<textarea id="txt1" cols="30" rows="10"></textarea>
<input type="button" id="btn" value="提交">
<ul id="ul1">

</ul>
0
如无特殊说明,文章均为本站原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到