JS實現(xiàn)模仿微博發(fā)布效果實例代碼

更新時間：2013年12月16日 16:56:42 作者：

這篇文章主要介紹了JS實現(xiàn)模仿微博發(fā)布效果實例代碼，有需要的朋友可以參考一下

效果：

思路：

利用多功能浮動運動框架實現(xiàn)微博效果，首先，將textarea中的屬性添加到新創(chuàng)建的li里面然后，再將li添加到ul里面，再利用浮動運動框架將數(shù)據(jù)動態(tài)的顯示出來。

代碼：

復(fù)制代碼代碼如下:

<head runat="server">
    <title></title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        #ul1
        {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            margin: 10px auto;
            overflow: hidden;
        }
        #ul1 li
        {
            list-style: none;
            padding: 4px;
            border-bottom: 1px #999 dashed;
            overflow: hidden;
            opacity: 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var btn = document.getElementById('btn');
            var txt = document.getElementById('t1');
            var oUl = document.getElementById('ul1');
            btn.onclick = function () {
                var cLi = document.createElement('li');
                cLi.innerHTML = txt.value;      //將數(shù)據(jù)添加到li里面
                txt.value = '';
                if (oUl.children.length > 0) {      //判斷是否已經(jīng)有l(wèi)i，如果有那么就插入，如果沒有那么就新建
                    oUl.insertBefore(cLi, oUl.children[0]);
                } else {
                    oUl.appendChild(cLi);
                }
                var iHeight = cLi.offsetHeight;     //獲得li的高度
                cLi.style.height = '0';
                move(cLi, { height: iHeight }, function () {        //然后利用浮動運動將數(shù)據(jù)顯示出來
                    move(cLi, { opacity: 100 });
                });
            }
        }
        //------------------------------------------------------------------------------------
        //獲取非行間樣式
        function getStyle(ojb, name) {
            if (ojb.currentStyle) {
                return ojb.currentStyle[name];
            }
            else {
                return getComputedStyle(ojb, false)[name];
            }
        }
        //緩沖運動json的應(yīng)用
        //json{attr,finsh}
        //json{width:200,height:200}
        function move(obj, json, fnName) {      //obj是對象，Json是對象的屬性， fnName是函數(shù)
            clearInterval(obj.timer);           //關(guān)閉之前的計時器
            obj.timer = setInterval(function () {
                var timeStop = true;        //記錄屬性是否都已經(jīng)執(zhí)行完成
                for (var attr in json) {        //遍歷json中的數(shù)據(jù)
                    var oGetStyle = 0;
                    if (attr == 'opacity') {  //判斷透明度
                        oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100);      //透明度取整，然后轉(zhuǎn)換完后賦值
                    }
                    else {
                        oGetStyle = parseInt(getStyle(obj, attr));
                    }
                    var speed = (json[attr] - oGetStyle) / 5;       //求速度
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //進位取整
                    if (oGetStyle != json[attr])
                        timeStop = false;
                    if (attr == 'opacity') {    //透明度
                        obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')';    //給透明度賦值
                        obj.style.opacity = (oGetStyle + speed) / 100;
                    }
                    else {
                        obj.style[attr] = oGetStyle + speed + 'px';     //移動div
                    }
                }
                if (timeStop) {     //如果所有屬性都已經(jīng)執(zhí)行完成，那么就關(guān)閉計時器
                    clearInterval(obj.timer);
                    if (fnName) {       //當關(guān)閉計時器后要執(zhí)行的函數(shù)
                        fnName();
                    }
                }
            }, 30)
        }
        //------------------------------------------------------------------------------------
    </script>
</head>
<body>
    <textarea id="t1"></textarea>
    <input type="button" id="btn" value="發(fā)布" />
    <ul id="ul1">
        <li style="display: none;"></li>
    </ul>
</body>