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

随机推荐

CAS缺点
CAS虽然很高效的解决原子操作,但是CAS仍然存在三大问题.ABA问题,循环时间长开销大和只能保证一个共享变量的原子操作 1. ABA问题.因为CAS需要在操作值的时候检查下值有没有发生变化,如 ...
ie6-ie8支持CSS3选择器的解决办法
引入nwmatcher.js和selectivizr.js <!--[if lt IE 10]> <script src="html5shiv.js">&l ...
通过socket实现http通讯代码理解
1.首先构造http协议报头: String dd = "GET http://www.baidu.com HTTP/1.1" + "\r\n" + " ...
git 不区分文件大小写的处理
日期格式化（类似QQ邮箱中的邮件列表显示日期）
日期格式化(类似QQ邮箱中的邮件列表显示日期) public static string FormatDateDisplay(DateTime _datetime) { var ts = DateTi ...
20165321 2017-2018-2《Java程序设计》课程总结
每周作业链接汇总预备作业1:20165321 我期望的师生关系预备作业2:20165321 学习基础与C语言学习心得预备作业3:20165321预备作业3:Linux安装及命令入门第一周作业: ...
4.C#虚方法virtual详解
C#虚方法virtual详解在C++.Java等众多OOP语言里都可以看到virtual的身影,而C#作为一个完全面向对象的语言当然也不例外. 虚拟函数从C#的程序编译的角度来看,它和其它一般的函数 ...
Dockerfile详解（一）
Dockerfile 用于自动化构建一个docker镜像.Dockerfile里有 CMD 与 ENTRYPOINT 两个功能咋看起来很相似的指令,开始的时候觉得两个互用没什么所谓,但其实并非如此: ...
centos make error: fatal error: curses.h: No such file or directory
yum install ncurses.x86_64 yum install ncurses-devel.x86_64 yum install ncurses-libs.x86_64 yum inst ...
webpack使用雪碧图插件
1.先安装插件 npm install --save-dev webpack-spritesmith 2.配置webpack 配置之前先引入var SpritesmithPlugin = requi ...

slideDown留言板

slideDown留言板的更多相关文章

随机推荐

热门专题