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 事件查询综合 推荐收藏
Mar 10 Javascript
16个最流行的JavaScript框架[推荐]
May 29 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
小程序实现横向滑动日历效果
Oct 21 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中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
python实现类的静态变量用法实例
2015/05/08 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
python爬取微博评论的实例讲解
2021/01/15 Python
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
见习期自我鉴定
2013/11/07 职场文书
同学聚会主持词
2014/03/18 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
婚庆答谢词大全
2015/09/29 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers