代码如下 | 复制代码 |
*{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px solid; margin:10px auto; position: relative;overflow: hidden;} #ul1 li{border-bottom: 1px #999 dashed; padding: 4px; list-style: none;filter: alpha(opacity:0); opacity: 0;}
var oUl=document.getElementById('ul1'); var oTxt1=document.getElementById('txt1'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { var oLi=document.createElement('li'); oLi.innerHTML=oTxt1.value; oTxt1.value=''; if(oUl.children.length>0) { oUl.insertBefore(oLi,oUl.children[0]); } else { oUl.appendChild(oLi); } var iHeight=oLi.offsetHeight; oLi.style.height=0; move(oLi,{height:iHeight},function() { move(oLi,{opacity:100}); }); } |
chuan,js为之前写的完美运动框架:
代码如下 | 复制代码 |
functiongetstyle(obj,name) { if(obj.currentStyle) { returnobj.currentStyle; } else { returngetComputedStyle(obj,false)[name]; } } functionmove(obj,json,fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function() { varbBox=true;//假设所有值都已经到了 for(varstrrinjson) { if(strr=='opacity') { varcur=Math.round(parseFloat(getstyle(obj,strr))*100); } else { varcur=parseInt(getstyle(obj,strr)); } varspeed=(json[strr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[strr]) bBox=false; if(strr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed+')'); obj.style.opacity=(cur+speed)/100; } else { obj.style[strr]=cur+speed+'px'; } } if(bBox) { clearInterval(obj.timer); if(fnEnd)fnEnd(); } },30); }; |