基于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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Javascript创建类和对象详解
May 31 Javascript
Express本地测试HTTPS的示例代码
Jun 06 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 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
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
mysql 搜索之简单应用
2007/04/27 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
js函数般调用正则
2008/04/08 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
python自动化测试实例解析
2014/09/28 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
党员违纪检讨书怎么写
2014/11/01 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
离婚协议书范文2016
2016/03/18 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Java集成swagger文档组件
2021/06/28 Java/Android
游戏《东方异文石:爱亚利亚黎明》正式版发布
2022/04/03 其他游戏
python图像处理 PIL Image操作实例
2022/04/09 Python