表情上傳前端頁面
阿新 • • 發佈:2018-11-03
效果圖
1: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;}
.qq{width:600px;height:400px;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;}
/*左邊盒子*/
.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;}
</style>
2:HTML部分
<div class="qq">
<p class="q_title">谷歌十年個人QQ: 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>
3: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);
})
</script>
效果圖: