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


Posted in Javascript onOctober 20, 2012
<!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>
Javascript 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
JS中substring与substr的用法
Nov 16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
JS的replace方法介绍
Oct 20 #Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 #Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 #Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 #Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 #Javascript
JS自动缩小超出大小的图片
Oct 12 #Javascript
文本框input聚焦失焦样式实现代码
Oct 12 #Javascript
You might like
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
《桥》教学反思
2014/04/09 职场文书
本科毕业生自荐信
2014/06/02 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js