js表情图实现

最新推荐文章于 2023-07-24 11:20:15 发布
weixin_33958585
最新推荐文章于 2023-07-24 11:20:15 发布
阅读量311
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/yonghan/blog/842360
版权
2019独角兽企业重金招聘Python工程师标准>>>
<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <style type="text/css">
        /*展示数据时使用的样式*/
        .emo{background-image:url(./images/emoji.png); width:20px; height:20px;display: inline-block;}
        /*end*/
        .emoji{background-image:url(./images/emoji.png); width:20px; height:20px;display: inline-block float: left;}
        .emoji1{background-position:0 0;}
        .emoji2{background-position:-20px 0;}
        .emoji3{background-position:-40px 0;}
        .emoji4{background-position:-60px 0;}
        .emoji5{background-position:-80px 0;}
        .emoji6{background-position:-100px 0;}
        .emoji7{background-position:-120px 0;}
        .emoji8{background-position:0 -20px;}
        .emoji9{background-position:-20px -20px;}
        .emoji10{background-position:-40px -20px;}
        .emoji11{background-position:-60px -20px;}
        .emoji12{background-position:-80px -20px;}
        .emoji13{background-position:-100px -20px;}
        .emoji14{background-position:-120px -20px;}
        .emoji15{background-position:0 -40px;}
        .emoji16{background-position:-20px -40px;}
        .emoji17{background-position:-40px -40px;}
        .emoji18{background-position:-60px -40px;}
        .emoji19{background-position:-80px -40px;}
        .emoji20{background-position:-100px -40px;}
        .emoji21{background-position:-120px -40px;}
        .emoji22{background-position:0 -60px;}
        .emoji23{background-position:-20px -60px;}
        .emoji24{background-position:-40px -60px;}
        .emoji25{background-position:-60px -60px;}
        .emoji26{background-position:-80px -60px;}
        .emoji27{background-position:-100px -60px;}
        .emoji28{background-position:-120px -60px;}
        .emoji29{background-position:0 -80px;}
        .emoji30{background-position:-20px -80px;}
        .emoji31{background-position:-40px -80px;}
        .emoji32{background-position:-60px -80px;}
        .emoji33{background-position:-80px -80px;}
        .emoji34{background-position:-100px -80px;}
        .emoji35{background-position:-120px -80px;}
        .emoji36{background-position:0 -100px;}
        .emoji37{background-position:-20px -100px;}
        .emoji38{background-position:-40px -100px;}
        .emoji39{background-position:-60px -100px;}
        .emoji40{background-position:-80px -100px;}
        .emoji41{background-position:-100px -100px;}
        .emoji42{background-position:-120px -100px;}
        .emoji43{background-position:0 -120px;}
        .emoji44{background-position:-20px -120px;}
        .emoji45{background-position:-40px -120px;}
        .emoji46{background-position:-60px -120px;}
        .emoji47{background-position:-80px -120px;}
        .emoji48{background-position:-100px -120px;}
        .emoji49{background-position:-120px -120px;}
        .emoji50{background-position:0 -140px;}
        .emoji51{background-position:-20px -140px;}
        .emoji52{background-position:-40px -140px;}
        .emoji53{background-position:-60px -140px;}
        .emoji54{background-position:-80px -140px;}
        .emoji55{background-position:-100px -140px;}
        .emoji56{background-position:-120px -140px;}
        .emoji57{background-position:0 -160px;}
        .emoji58{background-position:-20px -160px;}
        .emoji59{background-position:-40px -160px;}
        .emoji60{background-position:-60px -160px;}
        .emoji61{background-position:-80px -160px;}
        .emoji62{background-position:-100px -160px;}
        .emoji63{background-position:-120px -160px;}
        .emoji64{background-position:0 -180px;}
        .emoji65{background-position:-20px -180px;}
        .emoji66{background-position:-40px -180px;}
        .emoji67{background-position:-60px -180px;}
        .emoji68{background-position:-80px -180px;}
        .emoji69{background-position:-100px -180px;}
        .emoji70{background-position:-120px -180px;}
    </style>

    <title>基于jQuery开发的全能表单验证插件</title>
    <link href="http://www.jq22.com/demo/qqFace/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script  src="http://www.jq22.com/demo/qqFace/js/jquery.min.js"></script>
 
    <style>
        .comment { width: 680px; margin: 20px auto; position: relative; background: #fff; padding: 20px 50px 50px; border: 1px solid #DDD; border-radius: 5px; }
        .comment h3 { height: 28px; line-height: 28px }
        .com_form { width: 100%; position: relative }
        .input { width: 99%; height: 60px; border: 1px solid #ccc }
        .com_form p { height: 28px; line-height: 28px; position: relative; margin-top: 10px; }
        span.emotion { width: 42px; height: 20px; padding-left: 20px; cursor: pointer }
        span.emotion:hover { background-position: 2px -28px }
        .qqFace { margin-top: 4px; background: #fff; padding: 2px; border: 1px #dfe6f6 solid; }
        .qqFace table td { padding: 0px; }
        .qqFace table td img { cursor: pointer; border: 1px #fff solid; }
        .qqFace table td img:hover { border: 1px #0066cc solid; }
        #show { width: 770px; margin: 20px auto; background: #fff; padding: 5px; border: 1px solid #DDD; vertical-align: top; }
        .sub_btn { position: absolute; right: 0px; top: 0; display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */  *display: inline;
            vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e8f0de; border: solid 1px #538312; background: #64991e; background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e)); background: -moz-linear-gradient(top, #7db72f, #4e7d0e);  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
        }
        .sub_btn:hover { background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); background: -moz-linear-gradient(top, #6b9d28, #436b0c);  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
        }
    </style>
</head>

<body>
<div id="show"></div>
<div class="comment">
    <div class="com_form">
        <textarea class="input" id="saytext" name="saytext"></textarea>
        <p>
            <input type="button" class="sub_btn" value="提交">
            <span class="emotion" style="display: block;">表情</span></p>
    </div>
    <div id="face">
        <i class="ui-icon emoji emoji1" lab="em_1"></i>
       <i class="ui-icon emoji emoji2" lab="em_2"></i>
        <i class="ui-icon emoji emoji3" lab="em_3"></i>
        <i class="ui-icon emoji emoji4" lab="em_4"></i>
        <i class="ui-icon emoji emoji5" lab="em_5"></i>
        <i class="ui-icon emoji emoji6" lab="em_6"></i>
        <i class="ui-icon emoji emoji8" lab="em_7"></i>
        <i class="ui-icon emoji emoji9" lab="em_8"></i>
        <i class="ui-icon emoji emoji10" lab="em_9"></i>
        <i class="ui-icon emoji emoji11" lab="em_10"></i>
        <i class="ui-icon emoji emoji12" lab="em_11"></i>
        <i class="ui-icon emoji emoji13" lab="em_12"></i>
        <i class="ui-icon emoji emoji14" lab="em_13"></i>
        <i class="ui-icon emoji emoji15" lab="em_14"></i>
        <i class="ui-icon emoji emoji16" lab="em_15"></i>
        <i class="ui-icon emoji emoji17" lab="em_16"></i>
        <i class="ui-icon emoji emoji18" lab="em_17"></i>
        <i class="ui-icon emoji emoji19" lab="em_18"></i>
        <i class="ui-icon emoji emoji20" lab="em_19"></i>
        <i class="ui-icon emoji emoji21" lab="em_20"></i>
        <i class="ui-icon emoji emoji22" lab="em_21"></i>
        <i class="ui-icon emoji emoji23" lab="em_22"></i>
        <i class="ui-icon emoji emoji24" lab="em_23"></i>
        <i class="ui-icon emoji emoji25" lab="em_24"></i>
        <i class="ui-icon emoji emoji26" lab="em_25"></i>
        <i class="ui-icon emoji emoji27" lab="em_26"></i>
        <i class="ui-icon emoji emoji28" lab="em_27"></i>
        <i class="ui-icon emoji emoji29" lab="em_28"></i>
        <i class="ui-icon emoji emoji30" lab="em_29"></i>
        <i class="ui-icon emoji emoji31" lab="em_30"></i>
        <i class="ui-icon emoji emoji32" lab="em_31"></i>
        <i class="ui-icon emoji emoji33" lab="em_32"></i>
        <i class="ui-icon emoji emoji34" lab="em_33"></i>
        <i class="ui-icon emoji emoji35" lab="em_34"></i>
        <i class="ui-icon emoji emoji36" lab="em_35"></i>
        <i class="ui-icon emoji emoji37" lab="em_36"></i>
        <i class="ui-icon emoji emoji38" lab="em_37"></i>
        <i class="ui-icon emoji emoji39" lab="em_38"></i>
        <i class="ui-icon emoji emoji40" lab="em_39"></i>
        <i class="ui-icon emoji emoji41" lab="em_40"></i>
        <i class="ui-icon emoji emoji42" lab="em_41"></i>
        <i class="ui-icon emoji emoji43" lab="em_42"></i>
        <i class="ui-icon emoji emoji44" lab="em_43"></i>
        <i class="ui-icon emoji emoji45" lab="em_44"></i>
        <i class="ui-icon emoji emoji46" lab="em_45"></i>
        <i class="ui-icon emoji emoji47" lab="em_46"></i>
        <i class="ui-icon emoji emoji48" lab="em_47"></i>
        <i class="ui-icon emoji emoji49" lab="em_48"></i>
        <i class="ui-icon emoji emoji50" lab="em_49"></i>
        <i class="ui-icon emoji emoji51" lab="em_50"></i>
        <i class="ui-icon emoji emoji52" lab="em_51"></i>
        <i class="ui-icon emoji emoji53" lab="em_52"></i>
        <i class="ui-icon emoji emoji54" lab="em_53"></i>
        <i class="ui-icon emoji emoji55" lab="em_54"></i>
        <i class="ui-icon emoji emoji56" lab="em_55"></i>
        <i class="ui-icon emoji emoji57" lab="em_56"></i>
        <i class="ui-icon emoji emoji58" lab="em_57"></i>
        <i class="ui-icon emoji emoji59" lab="em_58"></i>
        <i class="ui-icon emoji emoji60" lab="em_59"></i>
        <i class="ui-icon emoji emoji61" lab="em_60"></i>
        <i class="ui-icon emoji emoji62" lab="em_61"></i>
        <i class="ui-icon emoji emoji63" lab="em_62"></i>
        <i class="ui-icon emoji emoji64" lab="em_63"></i>
        <i class="ui-icon emoji emoji65" lab="em_64"></i>
        <i class="ui-icon emoji emoji66" lab="em_65"></i>
        <i class="ui-icon emoji emoji67" lab="em_66"></i>
        <i class="ui-icon emoji emoji68" lab="em_67"></i>
        <i class="ui-icon emoji emoji68" lab="em_68"></i>
        <i class="ui-icon emoji emoji69" lab="em_69"></i>
        <i class="ui-icon emoji emoji70" lab="em_70"></i>
    </div>
</div>
</body>

<script type="text/javascript">


    //查看结果
    function replace_em(str){
        str = str.replace(/\</g,'&lt;');
        str = str.replace(/\>/g,'&gt;');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[em_([0-9]*)\]/g,'<i class="ui-icon emo emoji$1"></i>');
        return str;
    }

    $(function() {

        $(".emoji").click(function(){
           var lab =$(this).attr('lab');
            lab = '['+lab+']';
            var html = $("#saytext").val();
            html =html + lab;
            $("#saytext").val(html);
        });
        $(".sub_btn").click(function(){
            var str = $("#saytext").val();
            $("#show").html(replace_em(str));
        });
    });


</script>
</html>
转载于:https://my.oschina.net/yonghan/blog/842360