基于jqueryDOM写的类似微博发布的效果
基于 发布 效果 微博 类似
2023-06-13 09:14:40 时间
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>微博发布jq版</title>
<metaname="Keywords"content="">
<metaname="Description"content="">
<scriptsrc="http://code.jquery.com/jquery-1.8.0.min.js"type="text/javascript"></script>
<styletype="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:20pxauto0;font-size:30px;width:200px;text-align:center;color:blue;}
#outer{position:relative;width:400px;margin:auto;margin:20pxauto10px;}
#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:10pxauto;width:400px;}
#test3{border:1px#444solid;width:400px;min-height:300px;_height:300px;padding-bottom:10px;color:blue;float:left;}
.test{border-bottom:1pxbluedotted;width:383px;padding:10px5px5px10px;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>
<divid="outer">
<textareaid="test1"></textarea>
</div>
<inputtype="button"id="test2"value="发布"/>
<divclass="test3"><divid="test3"></div></div>
<scripttype="text/javascript">
<!--
$("#test2").click(function(){//点击发布的事件
if($("#test1")[0].value==""){
varfinish=$("<divclass="error"></div>").appendTo($("#outer")).hide().fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200);
return;
}else{
$("#test2")[0].disabled=true;//发布成功后,禁止
vartimer=newDate();
//微博
$("<divclass="test"><spanclass="imgOut"><imgsrc="images/wukong.gif"class="imgs"/></span><divclass="con"></div><divclass="inf">"+timer.getHours()+"时"+timer.getMinutes()+"分"+timer.getSeconds()+"秒"+"<inputtype="button"value="删除"class="bu"/></div></div>").prependTo($("#test3"));
$(".con")[0].innerText=$("#test1")[0].value;
//头像信息
$(".imgs:eq(0)").hover(
function(){$("<ulclass="imgInf"><li>名字:悟空</li><li>称号:战斗圣佛</li><li>现居:花果山</li></ul>").appendTo($(this).parent());},
function(){$(".imgInf").remove();}
)
//清空
$("#test1")[0].value="";
//发布成功时动画
$("<divclass="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>
相关文章
- 工具推荐|基于天气雷达数据的冰雹反演工具
- 基于佰马智能网关的高速路异常警示预警柱应用方案
- JeecgBoot 3.3.0 版本发布,基于代码生成器的企业级低代码平台
- 基于腾讯云开发微信小程序(新闻发布及共享平台)下
- SSM整合-基于IDEA社区版和Maven-案例入门
- 基于 LeanCloud 的无后端评论库 Nexment,于任何 Web 应用或前端项目使用
- 基于浏览器实现最最简单的富文本编辑器,一个文件全搞定
- AIGC发展太快!Meta发布首个基于文本的4D视频合成器:3D游戏建模师也要下岗了?
- openresty基于lua/geoIp/redis实现ip限制
- 基于腾讯云微服务引擎(TSE) ,轻松实现云上全链路灰度发布
- 为什么我们需要基于Kubernetes的云操作系统?
- 信号量/基于环形队列的生产消费者模型
- 实现基于Linux的服务脚本自动化管理(linux服务脚本)
- CentOS Linux 8 2105今日发布 基于RHEL 8.4
- 基于Windows Server 2022 微软发布新Docker容器镜像
- 英伟达发布首款代号为格蕾丝的CPU 基于ARM架构主要用于数据中心运算
- Vinux 5.1 发布 基于 Ubuntu 的 Linux 发行版
- Robolinux 8.8.1 发布,基于 Debian 的 Linux 发行版
- Parrot 4.5 发布:基于 Debian 的 Linux 发行版
- 基于 Ubuntu 的 Nitrux 4.15 x64发布
- Linux下的电骡,eMule是一个开源免费的P2P文件共享软件,基于eDonkey2000的eDonkey网络,遵循GNU通用公共许可证协议发布
- 架构设计基于Redis的集群实现(redis集群架构实现)
- 基于Redis的问题排查日志记录(redis问题排查日志)
- 简易而完善基于redis的运维架构(redis 运维框架)
- 基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
- 基于IE下ulli互相嵌套时的bug,排查,解决过程以及心得介绍
- 基于JVM调优的技巧总结分析
- 基于SVN源码服务器搭建(详细教程分析)