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>

 

你可能感兴趣的:(js)