新浪微博发布效果

最新推荐文章于 2022-09-15 15:07:10 发布

Apress92

最新推荐文章于 2022-09-15 15:07:10 发布

阅读量356

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/bin1813/article/details/53513101

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ul1{
            width: 300px;
            height:300px;
            border:  1px solid black;
            margin: 10px auto;
        }
        #ul1 div{
            list-style: none;
            border-bottom:1px dashed #999;
            padding: 2px;
            overflow: hidden;
            filter: alpha(opacity:0);
            opacity: 0;
        }


    </style>
    <script src="move3.js"></script>
    <script>

        window.onload=function(){
            var oTxt=document.getElementById('txt1');
            var oBtn=document.getElementById('btn');
            var oUl=document.getElementById('ul1');
            oBtn.onclick=function () {
                var oLi=document.createElement('div');
                var aLi=oUl.getElementsByTagName('div');
                oLi.innerHTML=oTxt.value;
                oTxt.value='';
                if(aLi.length){
                    oUl.insertBefore(oLi,aLi[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 name="" id="txt1" cols="40" rows="10"></textarea>
<input type="button" id="btn" value="发布">
<div id="ul1">

</div>
</body>
</html>