选择表情 <!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> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/2/62hfvweu/swipe.js"></script> <style type="text/css"> .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> </head> <body style="margin-left: 0px; margin-right: 0px;"> <div class="ui-page"> <input type="text" id="content" style="width: 100%;"/> <div id="expressBox"></div> </div> <div class="pub-faces"> <div class="ui-carousel js-slide" data-ride="carousel" id="slider"> </div> </div> </body> <script type="text/javascript"> 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> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 移动端表情 喜欢 (0)or分享 (0)
