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>

赞 (0)

相关推荐

  • 原生JavaScript制作微博发布面板效果

    原生JavaScript制作微博发布面板效果

    javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

  • js控住DOM实现发布微博效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博消息效果</title> <style> *{margin:0;padding: 0;} .warp{ width: 600px; mar

  • js实现微博发布小功能

    微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设置为不可拖拽. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <

  • 基于javascript制作微博发布栏效果

    本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用  var ie=!-[1,];即可 2.连续发生事件的用法:  IE下:触发对象.onpropertychange  标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • JS实现仿新浪微博发布内容为空时提示功能代码

    JS实现仿新浪微博发布内容为空时提示功能代码

    本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:

  • JavaScript仿微博发布信息案例

    JavaScript仿微博发布信息案例

    现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;

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

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

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • javaScript+turn.js实现图书翻页效果实例代码

    javaScript+turn.js实现图书翻页效果实例代码

    为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件   

  • 原生JS实现的放大镜效果实例代码

    这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style

  • js实现弹出框的拖拽效果实例代码详解

    具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

  • three.js镜头追踪的移动效果实例

    目录 达到效果 实现思路 实现难点 1.折现变曲线 2.镜头朝向不受控 3.镜头位置绑定不受控 4.镜头抖动 最终实现方法 方法一:镜头沿线推进 方法二:使用tween动画 方法比较 其他方法 方法一:绘制一条折线+animate镜头推进 方法二:绘制多条线段+animate镜头推进 方法三:绘制多条线段+tween动画变化镜头 方法四:优化方法一,绘制一条折线+animate镜头推进 达到效果 指定一条折线路径,镜头沿着路径向前移动,类似第一视角走在当前路径上. 实现思路 很简单画一条折线路径

  • JS 中使用Promise 实现红绿灯实例代码(demo)

    要求 使用promise 实现红绿灯颜色的跳转 绿灯执行三秒后 黄灯执行四秒后 红灯执行五秒 html 实现如下: <ul id="traffic" class=""> <li id="green"></li> <li id="yellow"></li> <li id="red"></li> </ul> 定义一个

  • jsp页面数据分页模仿百度分页效果(实例讲解)

    废话不多说,直接上代码 请根据自己的项目.包名修改 <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%

  • jQuery模拟实现天猫购物车动画效果实例代码

    jQuery模拟实现天猫购物车动画效果实例代码

    一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:

  • jQuery实现公告新闻自动滚屏效果实例代码

    本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti

  • 通过jquery实现页面的动画效果(实例代码)

    有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动

随机推荐