新浪微博之链式运动

最新推荐文章于 2020-11-04 10:26:44 发布

大海和云朵

最新推荐文章于 2020-11-04 10:26:44 发布

阅读量209

点赞数

分类专栏： JS小作品

本文链接：https://blog.csdn.net/qq_29592901/article/details/52297061

版权

JS小作品专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、要想类似高度的属性达到自适应：（1）获取当前元素此属性值var iHeight=offsetHight(2)再把属性值为0（3）引入完美运动框架，将iHeight设为目标值

2、ul下加li会出现卡顿情况，原因是布局导致，解决方案是，将ul和li均换成div

3、

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        #ul1{width:300px; height:300px;border:1px solid #000000;margin:10px auto;}
        #ul1 div{list-style: none;padding:2px;border-bottom: 1px dashed #000000;
                overflow: hidden;filter:alpha(opacity=0);opacity:0;}
    </style>
    <script src="move+1.js"></script>
    <script>
        window.onload=function(){
            var oTxt1=document.getElementById('txt1');
            var oBtn1=document.getElementById('btn1');
            var oUl1=document.getElementById('ul1');
            var aLi=oUl1.getElementsByTagName('div');
            oBtn1.onclick=function(){
                var oLi=document.createElement('div');
                oLi.innerHTML=oTxt1.value;
                oTxt1.value="";
                if(aLi.length){
                    oUl1.insertBefore(oLi,aLi[0]);
                }else {
                    oUl1.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" rows="10" cols="40"></textarea><br/>
<input  id="btn1" type="button" value="发布">
<div id="ul1"></div>
</body>
</html>