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()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

随机推荐

SpringMVC在使用Jackson2时关于日期类型格式化的问题
SpringMVC在使用Jackson2时关于日期类型格式化的问题如果无效,那么使用 @DateTimeFormat(pattern = "yyyy-MM-dd")
JVM内存管理（转）
转载出处:http://blog.csdn.net/wind5shy/article/details/8349559 模型 JVM运行时数据区域 JVM执行Java程序的过程中,会使用到各种数据区域, ...
Openresty 安装第三方插件
Openresty 安装第三方插件程序媛没有夜生活 2016.08.02 15:33* 字数 167 阅读 1283评论 0喜欢 2 在安装之前,我们先来看一下我们现有的模块. 1.将需要安装的插件 ...
DLNg[结构化ML项目]第二周迁移学习+多任务学习
1.迁移学习比如要训练一个放射科图片识别系统,但是图片非常少,那么可以先在有大量其他图片的训练集上进行训练,比如猫狗植物等的图片,这样训练好模型之后就可以转移到放射科图片上,模型已经从其他图片中学习 ...
【LeetCode每天一题】Search Insert Position(搜索查找位置)
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
JS通过类名判断是否都必填
//判断class='required' 是否都必填 function required() { var flag = true; $(".required").each(func ...
git 冲突解决办法
1. Pull is not possible because you have unmerged files. 症状:pull的时候 $ git pull Pull is not possible ...
python中参数传递之位置传递、关键字传递、包裹传递与解包裹
原文地址https://blog.csdn.net/love666666shen/article/details/77131487 1.位置与关键字传递 (1)位置传递:先用形式参数定义,然后在调用时 ...
django 【form表单】
#########################根据类来生成表单################# ''' django form类通模型类的属性映射到数据库的字段一样,表单类的字段会映射到HTM ...
sqli-labs(八)——修改密码处sql注入+http头sql注入
第17关: 这是一个重置密码的功能存在sqk注入,尝试账号密码都输入'",发现只会显示登陆失败,没有报错信息. 这个时候先推测一下后台的sql形式大概应该是: update users se ...

slideDown留言板

slideDown留言板的更多相关文章

随机推荐

热门专题