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

随机推荐

jsp在select中的option中编写if标签
<select onchange="lxx(this)"> <option value="">全部</option> < ...
vue-自定义全局键盘码
1.Vue.config.keyCodes.enter=13; //main.js中定义全局 <template> <div> <input v-model=" ...
logging日志模块的使用
logging日志模块的使用 logging模块中有5个日志级别: debug 10 info 20 warning 30 error 40 critical 50 通常使用日志模块,是用字典进行配置 ...
[vue]声明式导航和编程式导航
声明式导航和编程式导航共同点: 都能进行导航,都可以触发路由,实现组件切换区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
Centos7下安装syslog-ng
1. syslog-ng的安装地址 https://github.com/balabit/syslog-ng/releases 下载最新版本. 2. 安装gnomeui开发包,因为syslog-ng依 ...
xxx.app已损坏,打不开.你应该将它移到废纸篓-已解决
到这种情况可能不是你的软件包的问题,可能是macos安全设置问题. 解决办法就是: 1.系统偏好设置... -> 安全性与隐私-->修改为任何来源 2.serria里面没有“任何来源”这一 ...
超实用教程，教你用墨刀做出小红书app原型
一个新手怎么用1小时快速学会APP原型设计? 1小时很短,这意味着学习时必须把握APP原型设计中的重点.难点,而非面面俱到. 要在短时间内理解.掌握一个工具的使用,最有效的方式莫过于临摹: 看实例视频 ...
inbox.MoveTo Folder does not move message out of inbox
inbox.MoveTo Folder does not move message out of inbox #160 Closed vnwind opened this issue on 14 M ...
php 中 get_cfg_var() 与 ini_get() 的异同
背景 get_cfg_var() 取的值是配置文件中的值 ini_get() Gets the value of a configuration option, 则取的当前值(运行时,PHP系统定义) ...
iOS 元件组件-创建静态库static library
概述在项目开发的过程中,经常使用静态库文件.例如两个公司之间业务交流,不可能把源代码都发送给另一个公司,这时候将私密内容打包成静态库,别人只能调用接口,而不能知道其中实现的细节. 库是一些没有mai ...

slideDown留言板

slideDown留言板的更多相关文章

随机推荐

热门专题