基于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翻页效果
Jul 23 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
php网站地图生成类示例
2014/01/13 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
ppk谈JavaScript style属性
2008/10/10 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python脚本监控docker容器
2016/04/27 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Django admin组件的使用
2020/10/24 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
2014年党风建设工作总结
2014/11/19 职场文书
颐和园导游词400字
2015/01/30 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Nginx配置根据url参数重定向
2022/04/11 Servers
mysql sock 文件解析及作用讲解
2022/07/15 MySQL