<div class="codetitle"> <span><a style="CURSOR: pointer" data="77831" class="copybut" id="copybut77831" onclick="doCopy('code77831')"><u>复制代码</u></a></span>代码如下:</div> <div class="codebody" id="code77831"> <br><!DOCTYPE HTML> <br> <br> <br><meta charset="utf-8"> <br><title>微博出版布jq版</title> <br><meta name="キーワード" content=""> <br><meta name="説明" content=""> <br><script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> <br><style type="text/css"> <br>/*重置{*/ <br>html{color:#000;background:#fff;} <br>body,div,ul,li,h1,input,button,textarea{padding:0;margin :0;} <br>img{border:0;} <br>li{list-style:none;} <br>/*} 重置*/ <br>h1{margin:20px auto 0;font-size :30px;width:200px;text-align:center;color:blue;} <br>#outer{position:relative;width:400px;margin:auto;margin:20px auto 10px;} <br>#test1{display :block;width:400px;height:70px;} <br>.error{background:#f00;width:400px;height:50px;position:absolute;left:1px;top:10px;opacity:0.6;filter:alpha (opacity=60);} <br>#test2{display:block;margin-left:800px;width:60px;height:30px;font-size:20px;} <br>.test3{margin:10px auto;width :400px;} <br>#test3{border:1px #444 Solid;width:400px;min-height:300px;_height:300px;padding-bottom:10px;color:blue;float:left;} <br>。 test{border-bottom:1px blue dotted;width:383px;padding:10px 5px 5px 10px;float:left;} <br>.inf{margin-top:15px;float:right;color:#555;} <br>.con{margin-left:16px;display:inline;width:304px;float:left;word-break:break-all;} <br>.bu{margin-left:6px;display:inline;} <br>.imgs{幅:60px;高さ:60px;float:left;} <br>.imgInf{width:120px;background:#f0f;color:#fff;position:absolute;z-index:2;left:- 65px;top:62px;opacity:0.5;filter:alpha(opacity=50);} <br>.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);} <br>.imgOut{position:relative;} <br><br></style> <br></head> <br> <br><h1>微博配信</h1> <BR><div id="外側"> <br><textarea id="test1" ></textarea> <br> </h1> </div> <br><input type="button" id="test2" value="発行"/> <br><div class="test3"><div id="test3"></div></div> <br><br><script type="text/javascript"> <br><!-- <BR>$('#test2').click(function(){ //点击発行的イベント <BR>if($('#test1')[0].value== ""){ <BR>varfinish=$('<div class="error"></div>').appendTo($('#outer')).hide().fadeIn(200) .fadeOut(200).fadeIn(200).fadeOut(200); <br>return; <br>}else{ <br>$('#test2')[0].disabled=true; , 禁止 <br>var timer=new Date(); <br>//微博 <br>$('<div class="test"><span class="imgOut"><img src ="images/wukong.gif" class="imgs"/></span><div class="con"></div><div class="inf">' () "時間" timer.getMinutes() "分" timer.getSeconds() "秒" '<input type="button" value="删除" class="bu"/></div>< /div>').prependTo($('#test3')); <BR>$('.con')[0].innerText=$('#test1')[0].value; /头像情報 <BR>$('.imgs:eq(0)').hover( <BR>function(){$('<ul class="imgInf"><li>名字:悟空< /li><li>称号:战斗圣佛</li><li>现居:花果山</li></ul>').appendTo($(this).parent() );}, <br>function(){$('.imgInf').remove();} <br>) <br>//清空 <br>$('#test1')[0].value= ""; <br>//発行成功時アニメーション <br>$('<div class="finish">発行成功</div>').appendTo($('#outer')).hide(). fadeIn(500).fadeOut(500,function(){$('#test2')[0].disabled=false;}); <br>//插入节点時のアニメーション画效果 <br>$('.test:first').hide().slideDown("slow"); <br>//删除按钮のイベント <br>$('.bu:eq(0)').click(function(){ <br>if(confirm('确定删除吗?')){ <br> $(this).parent().parent().hide(1000,function(){ <br>$(this).remove(); <br>}); <br>} <br>}); <br>} <br>}) <br>//--> <br></script> <br></body> <br></html> <br><br>