新浪微博发表内容ajax拼接

来源：互联网发布：最优化方法推荐编辑：程序博客网时间：2024/06/06 16:35

效果图：
这里写图片描述

css部分<style type="text/css">        *{margin:0;padding:0;}        body{font-size:12px;font-family:"微软雅黑";background:url("images/bg.jpg") no-repeat;background-size:cover;color:#666;}        img{border:0;}        ul li{list-style:none;}        a{text-decoration:none;}        .qq{width:600px;height:200px;background:#fffcf4;border:1px solid #ebe3bc;margin:200px auto;position:relative;}        .qq .q_title{font-size:14px;padding:10px 0 0 20px;}        .qq .q_msg{width:538px;height:48px;border:1px solid #ebe3bc;margin:15px auto;background:#fff;font-size:14px;padding:10px;color:red;}        /*文本框里的表情有2px的间隔*/        .qq .q_msg img{padding:2px;}        .qq .q_face{float:left;margin-left:20px;}        /*按钮*/        .qq .btn{width:80px;height:30px;border:0;background:orange;color:#fff;font-size:14px;font-family:"微软雅黑";border-radius:3px;margin-left:455px;}        /*表情区域父盒子*/        .qq .q_allface{width:514px;height:210px;border:1px solid #D0D0D0;position:absolute;top:160px;left:20px;background:#fff;box-shadow:0 0 10px #D7D7D7;box-shadow:1px 1px 8px red;        display:none;        }        /*左边盒子*/        .qq .q_allface .f_ul{width:119px;height:210px;background:#f8f8f8;float:left;}        .qq .q_allface ul li{line-height:30px;border-bottom:1px solid #fff;padding-left:10px;}        /*右边盒子*/        .qq .q_allface .q_img{width:390px;height:210px;float:right;}        /*表情列表*/        .qq .q_allface .q_img ul li{float:left;margin:2px;cursor:pointer;}        /*内容区父盒子*/        .msg_box{margin:100px auto;}        /*小盒子*/        .msg_box .m_list{width:600px;height:120px;background:#fff;border-radius:3px;margin-top:20px;}        /*头像和个人信息部分*/        .msg_box .m_list .m_header{height:50px;}        /*让头像变圆角*/        .msg_box .m_list .m_header img{border-radius:50%;margin-top:5px;}        /*a链接部分*/        .msg_box .m_list .m_header a{display:block;line-height:50px;float:left;margin-left:20px;color:#666;font-size:14px;}        .msg_box .m_list .m_header a:hover{color:red;opacity:.65;}        /*发表的内容区域*/        .msg_box .m_list .m_con{width:500px;height:40px;line-height:40px;color:#333;}  </style>   <link type="text/css" rel="stylesheet" href="css/animate.min.css">

html部分<div class="qq">        <p class="q_title">谷歌十年个人QQ:&nbsp;870162355</p>        <!-- contentEditable="true" 让div变成可编辑区域 不用textarea -->        <div class="q_msg" contentEditable="true"></div>        <a href="#" class="q_face">            <img src="images/faces/2-121101200423.gif" width="24" height="24" alt="qq表情">        </a>        <button class="btn">发表</button>        <div class="q_allface">            <ul class="f_ul">                <li>微博-表情</li>                <li>陌陌-表情</li>                <li>微信-表情</li>                <li>qq-表情</li>            </ul>            <div class="q_img">                <ul>                    <li><img src="images/faces/2-121101200405.gif" ></li>                    <li><img src="images/faces/2-121101200406.gif" ></li>                    <li><img src="images/faces/2-121101200406-50.gif" ></li>                    <li><img src="images/faces/2-121101200406-51.gif" ></li>                    <li><img src="images/faces/2-121101200407.gif" ></li>                    <li><img src="images/faces/2-121101200407-50.gif" ></li>                    <li><img src="images/faces/2-121101200407-51.gif" ></li>                    <li><img src="images/faces/2-121101200408.gif" ></li>                    <li><img src="images/faces/2-121101200408-50.gif" ></li>                    <li><img src="images/faces/2-121101200409.gif" ></li>                    <li><img src="images/faces/2-121101200409-50.gif" ></li>                    <li><img src="images/faces/2-121101200409-51.gif" ></li>                    <li><img src="images/faces/2-121101200410.gif" ></li>                    <li><img src="images/faces/2-121101200410-50.gif" ></li>                    <li><img src="images/faces/2-121101200410-51.gif" ></li>                    <li><img src="images/faces/2-121101200411.gif" ></li>                    <li><img src="images/faces/2-121101200412-50.gif"></li>                    <li><img src="images/faces/2-121101200412.gif"></li>                    <li><img src="images/faces/2-121101200413.gif"></li>                    <li><img src="images/faces/2-121101200413-50.gif"></li>                    <li><img src="images/faces/2-121101200414.gif"></li>                    <li><img src="images/faces/2-121101200414-50.gif"></li>                    <li><img src="images/faces/2-121101200415.gif"></li>                    <li><img src="images/faces/2-121101200415-50.gif"></li>                    <li><img src="images/faces/2-121101200416.gif"></li>                    <li><img src="images/faces/2-121101200416-50.gif"></li>                    <li><img src="images/faces/2-121101200417.gif"></li>                    <li><img src="images/faces/2-121101200418.gif"></li>                    <li><img src="images/faces/2-121101200418-50.gif"></li>                    <li><img src="images/faces/2-121101200419-50.gif"></li>                    <li><img src="images/faces/2-121101200420.gif"></li>                    <li><img src="images/faces/2-121101200421.gif"></li>                    <li><img src="images/faces/2-121101200421-50.gif"></li>                    <li><img src="images/faces/2-121101200424.gif"></li>                    <li><img src="images/faces/2-121101200445.gif"></li>                    <li><img src="images/faces/2-121101200449.gif"></li>                    <li><img src="images/faces/2-121101200447.gif"></li>                </ul>            </div>        </div>        <!--发表内容列表区域-->        <div class="msg_box">        </div>     </div>

jquery部分<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>     <script type="text/javascript">        $(".q_face").click(function(){            $(".q_allface").toggle(400);        });        $(".q_img").find("li").click(function(){            //点击的时候克隆一份给上面的文本框里            var img = $(this).find("img").clone();            //利用append添加上去            $(".q_msg").append(img);        });        //按钮点击事件        $(".btn").click(function(){            //获取输入的内容            var content = $(".q_msg").text();            //如果内容为空 就获取焦点            if(content == ""){                $(".q_msg").focus();                return;            }            //ajax拼接            var html = $("<div class='m_list animated bounceIn'>"+                "<div class='m_header'>"+                "<a href='#'><img src='../time/3.jpg' width='50' height='50' border='0' alt=''></a>"+                "<a href='#'>文秀</a>"+                "</div>"+                "<div class='m_con'>"+                ""+$(".q_msg").html()+""+                "</div>"+                "</div>");                      $(".msg_box").prepend(html);        });

阅读全文

0 0