- <style>
- *{ margin: 0; padding: 0;}
- #ul1{
- width: 400px;
- height: 400px;
- border: 1px solid #000;
- margin: 10px auto;
- padding: 4px;
- overflow: hidden;
- }
- /* #ul li 选择器写错了!!! */
- #ul1 li{
- border-bottom: 1px #999 dashed;
- padding: 4px;
- list-style: none;
- overflow: hidden;
- filter:alpha(opacity=0);
- opacity: 0;
- /* border-bottom: 1px dashed; border 没有设置颜色!!! */
- /* filter: alpha = 0; 格式错误!! */
- }
- </style>
- <script src="move2.js"></script>
- <script>
- Windows.onload = function()
- {
- var oTxt = document.getElementById('txt1');
- var oBtn = document.getElementById('btn1');
- var oUl = document.getElementById('ul1');
- oBtn.onclick = function()
- {
- var oLi = document.createElement('li');
- oLi.innerhtml = oTxt.value;
- oTxt.value = '';
- if(oUl.children.length>0)
- {
- // oUl.insertBefore(oLi, oUl.childNodes[0])
- // 注意 childNodes 和 children 的区别
- oUl.insertBefore(oLi, oUl.children[0]);
- }
- else
- {
- oUl.appendChild(oLi); // 添加的子节点值是不是这样写的?
- };
- var iHeight = oLi.offsetHeight;
- oLi.style.height = '0';
- startMove(oLi, {height: iHeight}, function()
- {
- startMove(oLi, {opacity: 100})
- });
- };
- };
- </script>
- </head>
- <body>
- <textarea id="txt1" cols="30" rows="4"></textarea>
- <input type="button" value="发布" id="btn1">
- <ul id="ul1"></ul>
- </body>
来源: http://www.bubuko.com/infodetail-2909390.html