JS实现微博发布消息

效果:发布时高度慢慢增大，透明度也同时变为100

思路：

1、创建li

2、li的值是从文本框获取的 li.innerHtml=txt.value;

3、清空文本框 txt.value='';

4、if判断如果没有内容的时候就appendChild插入，如果有内容就倒序插入。

5、用offsetHeight获取li高度，先把li高度设置为0，再通过运动框架设置li高度和透明度

 

JS代码：

View Code 
 1 <script>
 2 window.onload=function()
 3 {
 4     var oUl=document.getElementById('ul');
 5     var aBtn=document.getElementById('btn');
 6     var oTxt=document.getElementById('txt');
 7     
 8     aBtn.onclick=function()
 9     {
10         var oLi=document.createElement('li');
11         oLi.innerHTML=oTxt.value;
12         oTxt.value='';
13         
14         if(oUl.children.length>0)  //如果Li有内容
15         {
16             oUl.insertBefore(oLi,oUl.children[0]);  //就在第一条内容前插入
17         }
18         else
19         {
20             oUl.appendChild(oLi);  //如果没内容就在当前插入
21         }
22         
23         oLiHeight=oLi.offsetHeight;
24         oLi.style.height='0';
25         startMove(oLi,{height: oLiHeight,opacity: 100});
26     };
27 };
28 </script>

 

完整代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>仿微博发布内容</title>
 6 <style>
 7 *{margin:0;padding:0;}
 8 ul{margin:0 auto;width:400px;height:400px;border:solid 1px #000;overflow:hidden;}
 9 ul li{padding:4px;border-bottom:dotted 1px #ccc;list-style:none;filter:aplha(opacity:0);opacity:0;}
10 </style>
11 <script src="baseCommon.js"></script>
12 <script>
13 window.onload=function()
14 {
15     var oUl=document.getElementById('ul');
16     var aBtn=document.getElementById('btn');
17     var oTxt=document.getElementById('txt');
18     
19     aBtn.onclick=function()
20     {
21         var oLi=document.createElement('li');
22         oLi.innerHTML=oTxt.value;
23         oTxt.value='';
24         
25         if(oUl.children.length>0)  //如果Li有内容
26         {
27             oUl.insertBefore(oLi,oUl.children[0]);  //就在第一条内容前插入
28         }
29         else
30         {
31             oUl.appendChild(oLi);  //如果没内容就在当前插入
32         }
33         
34         oLiHeight=oLi.offsetHeight;
35         oLi.style.height='0';
36         startMove(oLi,{height: oLiHeight,opacity: 100});
37     };
38 };
39 </script>
40 </head>
41 
42 <body>
43 <textarea cols="40" rows="4" id="txt"></textarea>
44 <input type="button" value="发布" id="btn" />
45 <ul id="ul">
46 </ul>
47 </body>
48 </html>

 

posted @ 2013-03-22 17:49  yexingwen  阅读(1643)  评论(0)  编辑  收藏  举报