基于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中的浮点型运算问题
Jan 06 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
JavaScript继承的三种方法实例
May 12 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
多文件上传的例子
2006/10/09 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php使用pdo连接sqlite3的配置示例
2016/05/27 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
python基础梳理(一)(推荐)
2019/04/06 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
python输入中文的实例方法
2020/09/14 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
关于运动会的稿件
2014/02/02 职场文书
体育教师自我鉴定
2014/02/12 职场文书
新春文艺演出主持词
2014/03/27 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
《确定位置》教学反思
2016/02/18 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL