1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>3.带运动效果的留言本</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-11 --> 10 <style> 11 *{margin:0;padding:0} 12 textarea{border:1px solid #000;} 13 ul{overflow:hidden;width:500px;height:500px;padding:10px; border:1px solid #000; position:absolute;right:300px;top:0} 14 li{list-style:none;line-height:28px;border-bottom:1px solid #ccc;overflow:hidden} 15 </style> 16 <script> 17 window.onload=function(){ 18 var oTxt=document.getElementsByTagName('textarea')[0]; 19 var oBtn=document.getElementById('btn'); 20 var oUl=document.getElementsByTagName('ul')[0]; 21 oBtn.onclick=function(){ 22 var oLi=document.createElement('li'); 23 oLi.innerHTML=oTxt.value; 24 oUl.appendChild(oLi); 25 oTxt.value=''; 26 27 //这里要先将oLi的offsetHeight存起来,然后再设置初始化高度为0,如果顺序反了将不起作用,那么就是先设为0，再获取高度了 28 var iHnow=parseInt(css(oLi,'height')); //parseInt 将字符串类型转化为数字类型 29 oLi.style.height='0px'; 30 31 huanchong(oLi,{ 32 'height':iHnow 33 }) 34 } 35 } 36 function css(obj,attr) { 37 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr] 38 } 39 function huanchong(obj,json,fn){ 40 clearInterval( obj.timer ); 41 obj.timer=setInterval(function(){ 42 43 var iBtn=true; 44 45 for(var attr in json){ 46 var iTarget = json[attr]; 47 48 if(attr == 'opacity' ){ 49 var iSpeed = (iTarget-Math.round((css(obj,attr)*100)))/6; 50 }else{ 51 var iSpeed = (iTarget-parseInt(css(obj,attr)))/6; 52 } 53 54 iSpeed= iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //精确值 55 56 if(attr == 'opacity' ){ 57 var s=Math.round(css(obj,attr)*100) + iSpeed; 58 }else{ 59 var s=parseInt(css(obj,attr)) + iSpeed; 60 } 61 62 if( s > iTarget && iSpeed > 0 || s < iTarget && iSpeed < 0) s=iTarget; 63 64 if( s!= iTarget ){ 65 iBtn=false; 66 if(attr == 'opacity' ){ 67 obj.style[attr] = s/100; 68 obj.style.filter='alpha(opacity='+s+')' 69 }else{ 70 obj.style[attr] = s +'px'; 71 } 72 } 73 74 } 75 if( s!= iTarget ){ 76 iBtn=true; 77 fn && fn.call(obj) 78 } 79 },30) 80 } 81 </script> 82 </head> 83 <body> 84 <textarea id="text" rows="10" cols="40"></textarea> 85 <input type="button" id="btn" value='留言'/> 86 <ul> </ul> 87 </body> 88 </html>