emoji pickerr 仿QQ兴趣部落
就是要实现这么个东西：
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<title>选择表情</title>
<style>
.pub-faces {
background: #F0EFF5;
padding: 25px 0 17px;
}
.pub-faces .ui-carousel {
margin: auto;
width: 320px;
overflow: hidden;
}
.ui-carousel {
position: relative;
-webkit-transform: translate(0,0);
}
.pub-faces .face-panel-wrap {
overflow: hidden;
}
.ui-carousel-inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
padding: initial;
}
ol, ul {
list-style: none;
}
.pub-faces .face-panel-1 {
background-image: url(http://7ximdq.com1.z0.glb.clouddn.com/1431445636499);
}
.pub-faces .face-panel-2 {
background-image: url(http://7ximdq.com1.z0.glb.clouddn.com/1431445637189);
}
.pub-faces .face-panel-3 {
background-image: url(http://7ximdq.com1.z0.glb.clouddn.com/1431445637328);
}
.pub-faces .face-panel-4 {
background-image: url(http://7ximdq.com1.z0.glb.clouddn.com/1431445637897);
}
.pub-faces .face-panel-5 {
background-image: url(http://7ximdq.com1.z0.glb.clouddn.com/1431445638189);
}
.pub-faces .face-panel {
/*background: #F0EFF5 no-repeat 50% 50%;*/
background-size: 320px auto;
width: 320px;
height: 120px;
float: left;
}
.ui-carousel-item {
position: relative;
/*z-index: 9;*/
/*display: none;*/
-webkit-transition: .2s ease-in-out left;
transition: .2s ease-in-out left;
-webkit-transform: translate(0,0);
}
li {
list-style: none;
}
.pub-faces .ui-carousel-indicators {
position: relative;
left: initial;
width: initial;
bottom: initial;
margin-left: -7px;
margin-top: 25px;
}
.ui-carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 11;
width: 60%;
padding-left: 0;
margin-left: -30%;
list-style: none;
-webkit-transform: translate(0,0);
text-align: center;
}
.pub-faces .ui-carousel-indicators li {
margin: 0 3px;
}
.pub-faces .ui-carousel-indicators li {
background-color: #ddd;
}
.ui-carousel-indicators li {
display: inline-block;
width: 8px;
height: 8px;
margin: 1px;
border-radius: 8px;
background-color: rgba(255,255,255,.3);
}
.ui-carousel-inner>.js-active {
left: 0;
z-index: 10;
}
.ui-carousel-inner>.js-show, .ui-carousel-inner>.js-active, .ui-carousel-inner>.js-next, .ui-carousel-inner>.js-prev {
display: block;
}
.pub-faces .ui-carousel-indicators li.js-active {
background-color: #64b5e8;
}
.ui-carousel-indicators li.js-active {
background-color: #fff;
}
.pub-faces .ui-carousel-indicators li {
margin: 0 3px;
}
.pub-faces .ui-carousel-indicators li {
background-color: #ddd;
}
.ui-carousel-indicators li {
display: inline-block;
width: 8px;
height: 8px;
margin: 1px;
border-radius: 8px;
background-color: rgba(255,255,255,.3);
}
.pub-faces .face-panel span {
width: 45px;
height: 40px;
float: left;
box-sizing: border-box;
}
/* 自定义qq表情样式 */
.pub-faces{
background:white !important;
padding: 65px 0 10px !important;
}
.pub-faces .ui-carousel-indicators{
margin-top:2rem !important;
}
</style>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/2/62hfvweu/swipe.js"></script>
</head>
<body style="margin-left: 0px; margin-right: 0px;">
<input type="text" id="content" style="width: 100%;"/>
<div class="ui-page">
</div>
<div class="pub-faces">
<div class="ui-carousel js-slide" data-ride="carousel" id="slider"></div>
</div>
</body>
<script>
var expressionHtml = '<ul class="ui-carousel-inner face-panel-wrap">';
for (var i = 1; i <= 5; i++) {
expressionHtml += '<li class="ui-carousel-item face-panel face-panel-'+ i +'">';
for(var j = 0; j < 20; j++){
var n = 20*(i-1)+j;
expressionHtml += '<span class="express" index="'+ n +'" alt="[em_'+ n +']"></span>';
}
expressionHtml += '<span class="express" index="-1" alt=""></span></li>';
}
expressionHtml += '</ul>';
var bottomHtml = '<ol id="position" class="ui-carousel-indicators">' +
'<li class="js-active"></li>' +
'<li class=""></li>' +
'<li class=""></li>' +
'<li class=""></li>' +
'<li class=""></li>' +
'</ol>';
expressionHtml += bottomHtml;
$("#slider").append(expressionHtml);
var slider =
Swipe(document.getElementById('slider'), {
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'js-active';
}
});
var bullets = document.getElementById('position').getElementsByTagName('li');
var curFocus = {
fid: 'content',
start: 0,
end: 0
};
$('#content').blur(function() {
curFocus.fid = 'content';
curFocus.start = $(this).get(0).selectionStart;
curFocus.end = $(this).get(0).selectionEnd;
});
// 点击表情
$('.express').on('click', function() {
// 获取表情对应code
var imgCode = $(this).attr('alt');
// 获取编号判断是否为删除按钮
var index = $(this).attr('index');
var ta = document.querySelector('textarea');
// 删除操作
if(index == -1){
if ($('#' + curFocus.fid).length) {
var text = $('#' + curFocus.fid).val();
// 获取光标之前的字符串
var changedText = text.substr(0, curFocus.start);
var len = changedText.length;
var reg=/\[em_([0-9]*)\]$/g;
// 删除表情code块或最后一个字符
if(reg.test(changedText)){
changedText=changedText.replace(reg,"");
}else{
changedText=changedText.substring(0,changedText.length-1);
}
var resText = changedText + text.substr(curFocus.end, text.length);
$('#' + curFocus.fid).val(resText);
// 调整光标位置
curFocus.start = curFocus.end = curFocus.end - (len - changedText.length);
}
// 添加操作
}else if ($('#' + curFocus.fid).length) {
var text = $('#' + curFocus.fid).val();
// 添加表情code块到光标位置
var resText = text.substr(0, curFocus.start) + imgCode + text.substr(curFocus.end, text.length);
$('#' + curFocus.fid).val(resText);
curFocus.start = curFocus.end = curFocus.end + imgCode.length;
}
});
</script>
</html>
浙公网安备 33010602011771号