摘要:代码如下:<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>微博发布jq版</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="https://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script> <style type="text/css"> /*重置{*/ html{color:#000;background:#fff;} body,p,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> <p id="outer"> <textarea id="test1" ></textarea> </p> <input type="button" id="test2" value="发布"/> <p class="test3"><p id="test3"></p></p> <script type="text/javascript"> <!-- $('#test2').click(function(){ //点击发布的事件 if($('#test1')[0].value==""){ var finish=$('<p class="error"></p>').appendTo($('#outer')).hide().fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200); return; }else{ $('#test2')[0].disabled=true; //发布成功后,禁止 var timer=new Date(); //微博 $('<p class="test"><span class="imgOut"><img src="images/wukong.gif" class="imgs"/></span><p class="con"></p><p class="inf">'+timer.getHours()+"时"+timer.getMinutes()+"分"+timer.getSeconds()+"秒"+'<input type="button" value="删除" class="bu"/></p></p>').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=""; //发布成功时动画 $('<p class="finish">发布成功</p>').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>

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博发布jq版</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
/*重置{*/
html{color:#000;background:#fff;}
body,p,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>
<p id="outer">
<textarea id="test1" ></textarea>
</p>
<input type="button" id="test2" value="发布"/>
<p class="test3"><p id="test3"></p></p>

<script type="text/javascript">
<!--
$('#test2').click(function(){ //点击发布的事件
if($('#test1')[0].value==""){
var finish=$('<p class="error"></p>').appendTo($('#outer')).hide().fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200);
return;
}else{
$('#test2')[0].disabled=true; //发布成功后,禁止
var timer=new Date();
//微博
$('<p class="test"><span class="imgOut"><img src="images/wukong.gif" class="imgs"/></span><p class="con"></p><p class="inf">'+timer.getHours()+"时"+timer.getMinutes()+"分"+timer.getSeconds()+"秒"+'<input type="button" value="删除" class="bu"/></p></p>').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="";
//发布成功时动画
$('<p class="finish">发布成功</p>').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>

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博发布jq版</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="https://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
<style type="text/css">
/*重置{*/
html{color:#000;background:#fff;}
body,p,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>
<p id="outer">
<textarea id="test1" ></textarea>
</p>
<input type="button" id="test2" value="发布"/>
<p class="test3"><p id="test3"></p></p>

<script type="text/javascript">
<!--
$('#test2').click(function(){ //点击发布的事件
if($('#test1')[0].value==""){
var finish=$('<p class="error"></p>').appendTo($('#outer')).hide().fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200);
return;
}else{
$('#test2')[0].disabled=true; //发布成功后,禁止
var timer=new Date();
//微博
$('<p class="test"><span class="imgOut"><img src="images/wukong.gif" class="imgs"/></span><p class="con"></p><p class="inf">'+timer.getHours()+"时"+timer.getMinutes()+"分"+timer.getSeconds()+"秒"+'<input type="button" value="删除" class="bu"/></p></p>').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="";
//发布成功时动画
$('<p class="finish">发布成功</p>').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技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接:

js实例教程-基于jquery DOM写的类似微博发布的效果

http://www.js-code.com/js/js_1064.html

80%的人都看过