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


Posted in Javascript onDecember 16, 2013

效果:

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

思路:

利用多功能浮动运动框架实现微博效果,首先,将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>
Javascript 相关文章推荐
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
JavaScript实现简单拖拽效果
Sep 15 Javascript
JSON无限折叠菜单编写实例
Dec 16 #Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
利用js动态添加删除table行的示例代码
Dec 16 #Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 #Javascript
You might like
php json_encode奇怪问题说明
2011/09/27 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
javascript同步Import,同步调用外部js的方法
2008/07/08 Javascript
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python使用剪切板的方法
2017/06/06 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python实现查找所有程序的安装信息
2020/02/18 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
简述数组与指针的区别
2014/01/02 面试题
跟单文员岗位职责
2014/01/03 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
水电工程师岗位职责
2015/02/13 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
给numpy.array增加维度的超简单方法
2021/06/02 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python
设置IIS Express并发数
2022/07/07 Servers