javascript学习之运动框架
模仿新浪博客首页的，最新评论：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{margin:0; padding: 0;} 8 #ul1{width: 300px; height: 300px; border:1px solid #000; margin:0 auto;} 9 #ul1 div{list-style: none; border-bottom:1px dashed #000;padding: 2px;overflow: hidden;filter:alpha(opacity:0);opacity: 0;} 10 </style> 11 <script type="text/javascript" src="move.js"></script> 12 <script type="text/javascript"> 13 window.onload = function(){ 14 var oArea = document.getElementById("area"); 15 var oBtn = document.getElementById("btn1"); 16 var oUl = document.getElementById("ul1"); 17 oBtn.onclick = function(){ 18 var oLi = document.createElement("div");//创建内部Div 19 var aLi = oUl.getElementsByTagName('div'); 20 oLi.innerHTML = oArea.value; 21 oArea.value = "";//点击发布后清空textarea 22 if(aLi.length){//如果内部已经有评论，那么就插入在第一个，否则就直接放在大的Div中 23 oUl.insertBefore(oLi,aLi[0]); 24 }else{ 25 oUl.appendChild(oLi); 26 } 27 var iHeight = oLi.offsetHeight;//计算回复Div的高 28 oLi.style.height = 0;//将Div的高设置为0，完成下面的动画 29 startMove(oLi,{height:iHeight},function(){ 30 startMove(oLi,{opacity:100}); 31 }); 32 } 33 }; 34 function startMove(obj,json,fn){ 35 clearInterval(obj.timer); 36 obj.timer = setInterval(function(){ 37 for(var attr in json){ 38 var iCur = 0; 39 if(attr == "opacity"){ 40 iCur = parseInt(parseFloat(getStyle(obj,attr))*100); 41 }else{ 42 iCur = parseFloat(getStyle(obj,attr)); 43 } 44 var iSpeed = (json[attr]-iCur)/8; 45 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) :Math.floor(iSpeed); 46 if(json[attr] == iCur){ 47 clearInterval(obj.timer); 48 if(fn){ 49 fn(); 50 } 51 }else{ 52 if(attr == "opacity"){ 53 obj.style.filter = 'filter:alpha(opacity:'+(iCur+iSpeed)+')'; 54 obj.style.opacity = (iCur+iSpeed)/100; 55 }else{ 56 obj.style[attr] = iCur+iSpeed+"px"; 57 } 58 } 59 } 60 },30); 61 } 62 function getStyle(obj,attr){ 63 if(obj.currentStyle){ 64 return obj.currentStyle[attr]; 65 }else{ 66 return getComputedStyle(obj,false)[attr]; 67 } 68 } 69 </script> 70 </head> 71 <body> 72 <textarea rows="10" cols="40" id="area"></textarea> 73 <input type="button" value="发布" id="btn1"> 74 <div id="ul1"> 75 </div> 76 </body> 77 </html>
菜鸟一个，大神路过就Ok了~~~
