大家都看过新浪微博的发状态功能，我模拟了一下类似的效果，包括发布时间，删除效果等。代码如下：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>微博发布jq版</title>

<meta name="Keywords" content="">

<meta name="Description" content="">

<script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>

<style type="text/css">

/*重置{*/

html{color:#000;background:#fff;}

body,div,ul,li,h1,input,button,textarea{padding:0;margin:0;}

img{border:0;}

li{list-style:none;}

/*}重置*/

h1{margin:20px auto 0;font-size:30px;width:200px;text-align:center;color:blue;}

#outer{position:relative;width:400px;margin:auto;margin:20px auto 10px;}

#test1{display:block;width:400px;height:70px;}

.error{background:#f00;width:400px;height:50px;position:absolute;left:1px;top:10px;opacity:0.6;filter:alpha(opacity=60);}

#test2{display:block;margin-left:800px;width:60px;height:30px;font-size:20px;}

.test3{margin:10px auto;width:400px;}

#test3{border:1px #444 solid;width:400px;min-height:300px;_height:300px;padding-bottom:10px;color:blue;float:left;}

.test{border-bottom:1px blue dotted;width:383px;padding:10px 5px 5px 10px;float:left;}

.inf{margin-top:15px;float:right;color:#555;}

.con{margin-left:16px;display:inline;width:304px;float:left;word-break:break-all;}

.bu{margin-left:6px;display:inline;}

.imgs{width:60px;height:60px;float:left;}

.imgInf{width:120px;background:#f0f;color:#fff;position:absolute;z-index:2;left:-65px;top:62px;opacity:0.5;filter:alpha(opacity=50);}

.finish{background:green;width:300px;height:50px;color:#ff0;font-size:30px;text-align:center;line-height:50px;position:absolute;left:50px;top:10px;opacity:0.6;filter:alpha(opacity=60);}

.imgOut{position:relative;}

</style>

</head>

<body>

    <h1>微博发布</h1>

    <div id="outer">

        <textarea  id="test1" ></textarea>

    </div>

    <input type="button" id="test2" value="发布"/>

    <div class="test3"><div id="test3"></div></div>

<script type="text/javascript">

<!--

    $('#test2').click(function(){                        //点击发布的事件

        if($('#test1')[0].value==""){

            var finish=$('<div class="error"></div>').appendTo($('#outer')).hide().fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200);

            return;

        }else{

            $('#test2')[0].disabled=true;                //发布成功后，禁止

            var timer=new Date();

            //微博

            $('<div class="test"><span class="imgOut"><img src="data:images/wukong.gif" class="imgs"/></span><div class="con"></div><div class="inf">'+timer.getHours()+"时"+timer.getMinutes()+"分"+timer.getSeconds()+"秒"+'<input type="button" value="删除" class="bu"/></div></div>').prependTo($('#test3'));

            $('.con')[0].innerText=$('#test1')[0].value;

            //头像信息

            $('.imgs:eq(0)').hover(

                function(){$('<ul class="imgInf"><li>名字：悟空</li><li>称号：战斗圣佛</li><li>现居：花果山</li></ul>').appendTo($(this).parent());},

                function(){$('.imgInf').remove();}

            )

            //清空

            $('#test1')[0].value="";

            //发布成功时动画

            $('<div class="finish">发布成功</div>').appendTo($('#outer')).hide().fadeIn(500).fadeOut(500,function(){$('#test2')[0].disabled=false;});

            //插入节点时的动画效果

            $('.test:first').hide().slideDown("slow");

            //删除按钮的事件

            $('.bu:eq(0)').click(function(){

                if(confirm('确定删除吗？')){

                    $(this).parent().parent().hide(1000,function(){

                        $(this).remove();

                    });

                }

            });

        }

    })

//-->

</script>

</body>

</html>

　　

微博发布效果jq版的更多相关文章

  1. 原生JS+tween.js模仿微博发布效果

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4816865.html 1.先看效果吧,有效果才有动力: 2.html结构: <!DOCTYPE ht ...

  2. VUE实现微博发布效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

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

  4. JS学习笔记 - 微博发布效果

    <script> window.onload = function() { var oTxt = document.getElementById('txt1'); var oBtn = d ...

  5. js控住DOM实现发布微博简单效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...

  6. 原生JavaScript 全特效微博发布面板效果实现

    javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...

  7. 《nodejs开发指南》微博实例express4.x版

    之前一直执着于前端开发,最近几天,开始学起了nodejs.作为一名前端开发者,见到这样一门用javascript写的后台自然是很激动的.但是,后台毕竟不同于前端,在学习的过程中,还是会遇到不少问题. ...

  8. js微博发布框的实现

    观察了微博发布框, 1.发现他的剩余文字是动态改变的, 2.且文字为零时 发布框颜色为暗色 3.文字不符合标准时提交不通过 整理了一下思路 js会主要用到的方法 1.onclick() //点击发布时 ...

  9. 一个jQ版大图滚动

    难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!do ...

随机推荐

  1. JAVA Socket地址绑定

    Socket常用有惨构造方法有如下: Socket(InetAddress address, int port) Socket(InetAddress address, int port, InetA ...

  2. L10 数据入站、转发、出站流程

    二 写出防火墙规则链之间的顺序也就是入站数据流向.转发数据流向.出站数据流向的过程 入站:PREROUTING→INPUT 数据包到达防火墙,由prerouting处理,判断是否修改地址 路由选择:判 ...

  3. OC——类

    1.Objective-C是C语言的超集,完全兼容C语言 2.所有的关键字都以“@”开头,例如:@interface,@class,@implementation 3.Objective-C的所有对象 ...

  4. Cordova了解

    概述 Cordova让我们可以使用HTML.JS以及CSS开发跨平台App的公共部分(整个App就是一个WebView或者或者嵌入到本地组件中),与原生API的交互通过Cordova插件实现. 安装配 ...

  5. 南阳师范学院ACM集训队博客使用方法

    南阳师范学院ACM集训队博客使用方法 为方便大家交流,我们使用的是同一个用户名和密码,所以请不要随意修改用户名和密码,不然大家都登不上了,谢谢! 首先进入主页:http://www.cnblogs.c ...

  6. 如何使用getopt()函数解析参数

    最近在写程序的过程中,把一部分时间都花费在程序对参数的处理上.今天听了学长说到getopt函数,才发现原来c里面还有一个专门解决参数处理的函数,查询了相关资料,这里简单总结一下. 使用int main ...

  7. Android项目记录点滴2

    1.把本机地址广播出去private void sendIP() { try { DatagramSocket dgSocket = new DatagramSocket(8989); byte[] ...

  8. Delphi XE6 通过JavaScript API调用百度地图

    参考昨天的内容,有朋友还是问如何调用百度地图,也是,谁让咱都在国内呢,没办法,你懂的. 首先去申请个Key,然后看一下百度JavaScript的第一个例子:http://developer.baidu ...

  9. 50% 的财富 500 强企业使用 Windows Azure

    在上周的北美TechEd大会上,我有幸见到了来自世界各地的客户.合作伙伴和分析师,其数量之多,让人震惊.没有什么比亲耳聆听使用 Windows Azure 来开创新天地的客户亲口讲述他们的故事更令人振 ...

  10. 解决Boost.Regex对中文支持不好的问题

    解决Boost.Regex对中文支持不好的问题 - k.m.Cao - 博客频道 - CSDN.NET 解决Boost.Regex对中文支持不好的问题 k.m.Caov0.1   问题的提出: Boo ...