slideDown留言板
<!doctype html>
<html lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
} body {
background: #3FC;
} #qq {
width: 600px;
/*宽*/
height: 170px;
/*高*/
background: #fff;
/*背景颜色*/
margin: 50px auto 30px;
border-radius: 5px;
/*Html5 圆角*/
} #qq p {
font-size: 12px;
color: #666;
font-family: "微软雅黑";
line-height: 45px;
text-indent: 20px;
} #qq .message {
width: 560px;
height: 70px;
margin: 0px auto;
outline: none;
border: 1px solid #ddd;
/*粗细 风格 颜色*/
} #qq .But {
width: 560px;
height: 35px;
margin: 15px auto 0px;
position: relative;
/*相对，参考对象*/
} #qq .But img.bq {
float: left;
cursor: pointer;
/*左浮动*/
} #qq .But span.submit {
width: 80px;
height: 30px;
background: #ff8140;
display: block;
float: right;
/*右浮动*/
line-height: 30px;
border-radius: 5px;
cursor: pointer;
/*手指*/
color: #fff;
font-size: 12px;
text-align: center;
font-family: "微软雅黑";
}
/*face begin*/ #qq .But .face {
width: 390px;
height: 160px;
background: #fff;
padding: 10px;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px #666;
position: absolute;
/*绝对定位*/
top: 21px;
left: 15px;
display: none;
/*隐藏*/
} #qq .But .face ul li {
width: 22px;
height: 22px;
list-style-type: none;
/*去掉圆点*/
float: left;
margin: 2px;
cursor: pointer;
}
/*msgCon begin*/ .msgCon {
width: 600px;
height: 500px;
margin: 0px auto;
} .msgCon .msgBox {
background: #fff;
padding: 10px;
margin-top: 20px;
} .msgCon .msgBox dl {
height: 60px;
border-bottom: 1px dotted #ddd;
} .msgCon .msgBox dl dt {
width: 50px;
height: 50px;
float: left;
} .msgCon .msgBox dl dt img {
border-radius: 25px;
} .msgCon .msgBox dl dd {
width: 500px;
height: 50px;
line-height: 50px;
float: right;
font-size: 16px;
font-family: "微软雅黑";
} .msgCon .msgBox .msgTxt {
font-size: 12px;
color: #666;
line-height: 30px;
margin-top: 30px;
} .time1 {
margin-left: 350px;
font-size: 16px;
}
</style> </head> <body>
<div id="qq">
<p>有什么新鲜事想告诉大家?</p>
<div class="message" style="margin-left: 10px;" contenteditable="true"></div>
<div class="But">
<img src="img/9.jpg" class='bq' width="22" />
<span class='submit'>发表</span>
<!--face begin-->
<div class="face">
<ul>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
<li><img src="img/3.jpg" title="[惊讶]" width="22"></li>
<li><img src="img/4.jpg" title="[兴奋]" width="22"></li>
<li><img src="img/1.jpg" title="[尴尬]" width="22"></li>
<li><img src="img/2.jpg" title="[泪奔]" width="22"></li>
</ul>
</div>
<!--face end-->
</div>
</div>
<!--qq end--> <!--msgCon begin-->
<div class="msgCon">
<!--<div class='msgBox'>
<dl><dt><img src='img/tx.jpg'/></dt><dd>浮云</dd></dl>
<div class='msgTxt'>"+txt+"</div>
</div>-->
</div> </body> </html>
<script type="text/javascript">
/*
点击标签图片 显示所有表情 如果点击浏览器其它部分 隐藏所有标签 如果点击某个表情，该表情添加到文本框中
其余都是dom操作
*/
//点击表情图片 动画实现所有表情的显示和隐藏
$(".bq").click(function() {
$(".face").slideDown(1000); return false;
})
//点击文档 隐藏表情
$(document).click(function() {
$(".face").slideUp(1000);
})
//点击某个表情 克隆该表情 添加到 div中
$(".face li").click(function() {
$(this).find("img").clone().appendTo(".message");
})
//发表内容
$(".submit").click(function() {
var txt = $(".message").html();
$(".msgCon").prepend(`<div class='msgBox'>
<dl><dt><img src='img/tx.jpg'/></dt><dd>浮云</dd></dl>
<div class='msgTxt'>${txt}</div>
</div>`); $(".msgBox:first").append(`<div class="time1">${new Date().toLocaleString()}</div>`);
})
</script>
slideDown留言板的更多相关文章
- AngularJs学习笔记（制作留言板）
原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章 ...
- dd——留言板再加验证码功能
1.找到后台-核心-频道模型-自定义表单 2.然后点击增加新的自定义表单 diyid 这个,不管他,默认就好 自定义表单名称 这个的话,比如你要加个留言板还是投诉建议?写上去呗 数据表 这个不要碰, ...
- asp.net留言板项目源代码下载
HoverTree是一个asp.net开源项目,实现了留言板功能. 前台体验网址:http://hovertree.com/guestbook/ 后台请下载源代码安装. 默认用户名:keleyi 默认 ...
- html的留言板制作（js）
这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论 ...
- 11月8日PHP练习《留言板》
一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php 登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- [课程设计]Scrum 3.7 多鱼点餐系统开发进度（留言板选择方案）
Scrum 3.7 多鱼点餐系统开发进度(留言板选择方案) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系统W ...
- [课程设计]Scrum 3.6 多鱼点餐系统开发进度（用户测试反馈页面构思&留言板设计）
Scrum 3.6 多鱼点餐系统开发进度(用户测试反馈页面构思&留言板设计) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团 ...
- 用 Express4 写一个简单的留言板
Knowledge Dependence:阅读文本前,你需要熟悉 Node.js 编程.Express 以及相关工具和常用中间件的使用. Node.js 以其单线程异步非阻塞的特点,越来越被广大的 W ...
- 个人网页的留言板实现与sae的数据库账户配置
个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...
随机推荐
- ORACLE12C架构图
- 20165236 《Java程序设计》第七周学习总结
20165236 <Java程序设计>第七周学习总结 教材学习内容总结 第十一章 JDBC与MySQL数据库 1.MySQL数据库管理系统: MySQL数据库管理系统,简称MySQL,是 ...
- crontab 详解
1.crontab文件格式 {minute} {hour} {day-of-month} {month} {day-of-week} {full-path-to-shell-script} ● mi ...
- 【LeetCode每天一题】Combination Sum II（组合和II）
Given a collection of candidate numbers (candidates) and a target number (target), find all unique c ...
- jenkins 多用户同时触发构建—简单实用
插件:build name setter plugin 插件地址:http://updates.jenkins-ci.org/download/plugins/ 其实以上插件,不使用也可以,以上插件我 ...
- js计算最大公约数和最小公倍数
一.计算最大公约数 1.小学时候一般采用质因数分解法,一般使用短除得到结果,下面用一种最初级的方法求最大公约数 function gcd2(a,b){ var result = 1; for(var ...
- linux申请strace ,lstrace, ptrace, dtrace
ltrace命令是用来跟踪进程调用库函数的情况. ltrace -hUsage: ltrace [option ...] [command [arg ...]]Trace library calls ...
- unity3d对象池的使用
说对象池之前首先来看看单例类和单例脚本的区别.这里有介绍 http://blog.csdn.net/lzhq1982/article/details/12649281 使用对象池的好处是不用每次都创建 ...
- cookie和session必须了解的东西
Cookie的机制 Cookie是浏览器(User Agent)访问一些网站后,这些网站存放在客户端的一组数据,用于使网站等跟踪用户,实现用户自定义功能. Cookie的Domain和Path属性标识 ...
- gitlab4.0->5.0->6.0->7.14->8.0->8.2升级
参考官方文档: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update 本地服务器为4.0.1版本 1)4.0.1->4. ...