复制代码 代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博发布jq版</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="/UploadFiles/2021-04-02/jquery-1.8.0.min.js"><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="/UploadFiles/2021-04-02/wukong.gif">$('.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>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>微博发布jq版</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="/UploadFiles/2021-04-02/jquery-1.8.0.min.js"><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="/UploadFiles/2021-04-02/wukong.gif">$('.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>
标签：
微博发布
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“基于jquery DOM写的类似微博发布的效果”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 群星.1992-电视金曲巡礼VOL.2【EMI百代】【WAV+CUE】
- 廖昌永《情缘HQ》头版限量[低速原抓WAV+CUE]
- 蔡琴《老歌》头版限量编号MQA-24K金碟[低速原抓WAV+CUE]
- 李嘉《国语转调》3CD[WAV+CUE]
- 谭咏麟《爱的根源 MQA-UHQCD》2022头版限量编号 [WAV+CUE][1G]
- 江洋 《江洋原创琵琶作品专辑》[320K/MP3][118.08MB]
- 江洋 《江洋原创琵琶作品专辑》[FLAC/分轨][228.33MB]
- 《战舰世界》语音包文件夹位置介绍
- 《CSGO》送好友皮肤方法介绍
- 《山羊模拟器重制版》发售平台说明
- 刘德华2002-美丽的一天[香港首批大包装首版][WAV]
- 刘文正《金装刘文正不朽经典金曲》2CD(1995环星)][WAV+CUE]
- 周慧敏《94美的化身演唱会》宝丽金1995港版2CD[WAV+CUE]
- 娃娃.1997-精选180绝版冠军精丫滚石】【WAV+CUE】
- 娃娃.1997-精选290巅峰情歌经典【滚石】【WAV+CUE】