zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    【转】 Shiro 核心功能案例讲解 基于SpringBoot 有源码
    【转】 SpringData 基于SpringBoot快速入门
    【转】 Dubbo整合SpringBoot
    【转】 SpringBoot war包部署到Tomcat服务器
    【转】 SpringBoot使用Redis缓存
    【转】 SpringBoot统一异常处理
    【转】 SpringBoot创建定时任务
    【转】 SpringBoot 多环境配置
    js小数运算出现误差
    vue中组件的data为什么是一个函数
  • 原文地址：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529072.html
Copyright © 2011-2022 走看看