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

随机推荐

20165236 2017-2018-2 《Java程序设计》第九周学习总结
20165236 2017-2018-2 <Java程序设计>第九周学习总结一.第十三章教材内容总结 1.URL类 URL类是java.net包中的一个重要的类,使用URL创建对象的应用 ...
python的map函数
map:对指定序列做映射 python3中的: map(function, iterable, ...) map(lambda x, y: x + y, [1, 3, 5, 7, 9], [2, 4, ...
如何给EOS账户设置自定义权限
https://bihu.com/article/1508858 EOS从上线以后,不断有传出token被盗的消息,安全无小事,我们一定要重视,今天从EOS帐户自己定义权限的角度来谈谈如何做好账户的安 ...
设置 matlab 画图格式
1:设置 matlab 画图格式 clear;clc; % load("array.mat"); % Bestallarray=array; % rllofcircle(Besta ...
python threading
//test.py 1 import threading 2 import time 3 4 exitFlag = 0 5 6 class myThread (threading.Thread): 7 ...
cocos2d-x c++ (多种屏幕Android与iOS的适配原理)
1.AppDelegate.cpp 文件中 bool AppDelegate::applicationDidFinishLaunching() { // initialize director aut ...
keras图像分类参考大神博客总结
利用keras预加载模型添加新的层来构建自己所需的模型: from keras.layers import GlobalAveragePooling2D,Dense from keras.applic ...
安装FusionInsight
1.在华为平台上下载整体客户端,不建议下载单个组件客户端,后期关联测试还是要装上的. 2.下载后需要将服务器上的客户端拷贝到本地.打开xShell,新建会话,登陆本地虚拟机上的Linux系统(19 ...
“无效数字” ；java.lang.Integer cannot be cast to java.lang.String
今天页面上突然查询不出数据,大致的sql语句是 select xx ,xxx from table a where a.lrmb in ( 6101060033, 61010503300, 61016 ...
MySQL编码问题探究
占个坑. 今天在向本机搭建的MySQL数据库插入中文的时候报错了. 使用 show variables like 'char%'; 及 show variables like 'collation%' ...

slideDown留言板

slideDown留言板的更多相关文章

随机推荐

热门专题