快捷導(dǎo)航

基于jquery DOM寫的類似微博發(fā)布的效果

更新時間：2012年10月20日 02:25:36 作者：

看了上個原生js DOM版的微博發(fā)布的效果，再來看看如何用jq寫?？赐甏a，就會發(fā)現(xiàn)jq的強(qiáng)大，用更少的代碼寫更多的效果

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>微博發(fā)布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>微博發(fā)布</h1> 
<div id="outer"> 
<textarea id="test1" ></textarea> 
</div> 
<input type="button" id="test2" value="發(fā)布"/> 
<div class="test3"><div id="test3"></div></div> 

<script type="text/javascript"> 
<!-- 
$('#test2').click(function(){ //點(diǎn)擊發(fā)布的事件 
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; //發(fā)布成功后，禁止 
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>稱號：戰(zhàn)斗圣佛</li><li>現(xiàn)居：花果山</li></ul>').appendTo($(this).parent());}, 
function(){$('.imgInf').remove();} 
) 
//清空 
$('#test1')[0].value=""; 
//發(fā)布成功時動畫 
$('<div class="finish">發(fā)布成功</div>').appendTo($('#outer')).hide().fadeIn(500).fadeOut(500,function(){$('#test2')[0].disabled=false;}); 
//插入節(jié)點(diǎn)時的動畫效果 
$('.test:first').hide().slideDown("slow"); 
//刪除按鈕的事件 
$('.bu:eq(0)').click(function(){ 
if(confirm('確定刪除嗎？')){ 
$(this).parent().parent().hide(1000,function(){ 
$(this).remove(); 
}); 
} 
}); 
} 
}) 
//--> 
</script> 
</body> 
</html> 