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

随机推荐

MySQL语法和用户授权
管理数据库 create database 等同于 create schema #导入数据库脚本 MariaDB [db1]> source /root/mysql/hellodb_in ...
xshell帮助
查看内置命令 $help Internal Commands:new: Creates a new session.open: Opens a session or the session dialo ...
C++中为何大量使用类指针
C++的精髓之一就是多态性,只有指针或者引用可以达到多态.对象不行类指针的优点: 第一实现多态. 第二,在函数调用,传指针参数.不管你的对象或结构参数多么庞大,你用指针,传过去的就是4个字节.如果用对 ...
SSH服务知识
1.ssh介绍 SSH 是 Secure Shell Protocol 的简写,由 IETF 网络工作小组(Network Working Group )制定:在进行数据传输之前,SSH先对联机数据包 ...
model browser 不出现时
1:当创建 component 时, 创建完成后,没有出现model browser, 这时需要在model上面添加一个model,然后保存退出,重新进入,就会出现model browser
Python处理Excel和PDF文档
一.使用Python操作Excel Python来操作Excel文档以及如何利用Python语言的函数和表达式操纵Excel文档中的数据. 虽然微软公司本身提供了一些函数,我们可以使用这些函数操作Ex ...
centos7下git服务器端搭建
git的安装: yum 源仓库里的 Git 版本更新不及时,最新版本的 Git 是 1.8.3.1,但是官方最新版本已经到了 2.9.2.想要安装最新版本的的 Git,只能下载源码进行安装. 1. 查 ...
Python第三弹--------文件和异常
文件读取: pi_digits.txt 3.1415926535 8979323846 2643383279 file_reader.py with open('pi_digits.txt') ...
[LeetCode] 868. Binary Gap_Easy
Given a positive integer N, find and return the longest distance between two consecutive 1's in the ...
【转360】KB4041678 Windows 仅安全更新(2017.10) 补丁更新后执行SQL出错! http://bbs.360.cn/thread-15201531-1-1.html
把EXCEL20003表数据导入到MDB数据库中sql命令语句\"SELECT * INTO 表 FROM [Excel 8.0;DATABASE=C:\\1.xls].[Sheet1$]\ ...

slideDown留言板

slideDown留言板的更多相关文章

随机推荐

热门专题