您的位置：首页 > Web前端 > JavaScript

JS实现模仿微博发布效果实例代码

2013-12-16 00:00 1401 查看

效果：

思路：

利用多功能浮动运动框架实现微博效果，首先，将textarea中的属性添加到新创建的li里面然后，再将li添加到ul里面，再利用浮动运动框架将数据动态的显示出来。

代码：

<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;      //将数据添加到li里面
                txt.value = '';
                if (oUl.children.length > 0) {      //判断是否已经有li，如果有那么就插入，如果没有那么就新建
                    oUl.insertBefore(cLi, oUl.children[0]);
                } else {
                    oUl.appendChild(cLi);
                }
                var iHeight = cLi.offsetHeight;     //获得li的高度
                cLi.style.height = '0';
                move(cLi, { height: iHeight }, function () {        //然后利用浮动运动将数据显示出来
                    move(cLi, { opacity: 100 });
                });
            }
        }
        //------------------------------------------------------------------------------------
        //获取非行间样式
        function getStyle(ojb, name) {
            if (ojb.currentStyle) {
                return ojb.currentStyle[name];
            }
            else {
                return getComputedStyle(ojb, false)[name];
            }
        }
        //缓冲运动json的应用
        //json{attr,finsh}
        //json{width:200,height:200}
        function move(obj, json, fnName) {      //obj是对象，Json是对象的属性， fnName是函数
            clearInterval(obj.timer);           //关闭之前的计时器
            obj.timer = setInterval(function () {
                var timeStop = true;        //记录属性是否都已经执行完成
                for (var attr in json) {        //遍历json中的数据
                    var oGetStyle = 0;
                    if (attr == 'opacity') {  //判断透明度
                        oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100);      //透明度取整，然后转换完后赋值
                    }
                    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) {     //如果所有属性都已经执行完成，那么就关闭计时器
                    clearInterval(obj.timer);
                    if (fnName) {       //当关闭计时器后要执行的函数
                        fnName();
                    }
                }
            }, 30)
        }
        //------------------------------------------------------------------------------------
    </script>
</head>
<body>
    <textarea id="t1"></textarea>
    <input type="button" id="btn" value="发布" />
    <ul id="ul1">
        <li style="display: none;"></li>
    </ul>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航