基于jquery DOM写的类似微博发布的效果

代码如下:

<!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="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>

赞 (0)

相关推荐

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

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

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

  • 基于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

  • JavaScript仿微博发布信息案例

    JavaScript仿微博发布信息案例

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

  • PHP+Mysql+jQuery实现发布微博程序 jQuery篇

    PHP+Mysql+jQuery实现发布微博程序 jQuery篇

    该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中.我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作. 首先查看示例:DEMO XHTML 复制代码 代码如下: <form id="myform" action="" method="post"> <h3><span class="counter">140</span>说说你正

  • 使用新浪微博API的OAuth认证发布微博实例

    继续前面的文章<新浪微博OAuth认证和储存的主要过程详解>,现在我们就使用它来发布微博. 我们已经将用户新浪微博的oauth_token和oauth_secret保存到 $_SESSION['oauth_token']=$result['oauth_token']; $_SESSION['oauth_secret']=$result['oauth_secret']; 里面,现在要做的就很简单了··就是调用sinaOauth的类进行发布.. 代码如下: //Statuses/update $c

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

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

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

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

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

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

  • 基于jQuery实现仿微博发布框字数提示

    基于jQuery实现仿微博发布框字数提示

    jQuery实现仿微博发布框字数提示,主要是运用字符串操作! 效果图: HTML: <textarea name="" id="" cols="30" rows="10"></textarea><br> <span>你还可以输入<strong style="color:red;">140</strong>个字</span>

  • js仿新浪微博消息发布功能

    本文实例为大家分享了js仿新浪微博消息发布的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息发布功能</title> <style> *{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px so

  • PHP+Mysql+jQuery实现发布微博程序 php篇

    PHP+Mysql+jQuery实现发布微博程序 php篇

    先还是要说明本例的业务流程: 1.前端用户输入内容,并对输入的内容字数进行实时统计. 2.用户提交数据,jQuery实现通过Ajax向后台发送数据. 3.后台PHP接收提交表单的数据,并对数据进行必要的安全过滤. 4.后台PHP连接Mysql数据库,并将提交过来的表单数据写入到相应的数据表中. 5.后台向返回成功结果数据内容,并通过Ajax将返回的数据内容插入到前端页面中. 上述1.2步在前篇文章:jQuery篇已讲解了,本文将完成剩余的散步. 效果图: 数据表 首先我们要准备一个数据表,表结构

随机推荐