表情包制作

html部分

 <div id="show">
<!--<img src="img/face/00.gif"/>-->
</div>
<div class="comment"> 
    <div> 
        <p id="saytext" name="saytext" contenteditable="true"></p> 
        <p class="bq-bottom"><span class="emotion" id="biaoqing"></span> <a id="btn">提交</a></p>
        <div id="ku">
        </div>

    </div> 

</div> 

css部分                

*{box-sizing: border-box;}
p{padding: 0;margin: 0;}
.comment{width: 960px;margin: 0 auto;border: 1px solid #ddd;margin-top: 30px;}
#saytext{width: 958px; height: 100px; border: 0;outline:none;resize: none;}
#saytext>img{width: 30px;height: 30px;}
.bq-bottom{height: 30px;width: 958px; border-top: 1px solid #ddd; }
#biaoqing{display: inline-block;width: 30px;height:30px;background: 
url(img/biao.png) no-repeat center center;background-size:100% 100% ; border-right:1px solid #ddd; 
cursor: pointer;
}
#biaoqing:hover{background: url(img/biao2.png) no-repeat center center;background-size:100% 100% ; }
#btn{float: right;display: inline-block;width:100px;height:30px;line-height: 30px; background: #ddd;text-align: center;cursor: pointer;} 
#ku{
border: 1px solid #000;
display: none;
margin-top:2px ;
}
#ku img{width: 69px;height: 69px;border: 1px solid #ccc;}
#show{width: 960px;height: 100px; margin: 0 auto; border: 1px solid #ddd;}

#show>img{width: 50px;height: 50px;}

第二 我的表情图片是PHP传过来的

php部分

$biaoqing=[
["title"=>"1","src"=>"face/01.gif"],
["title"=>"1","src"=>"face/02.gif"],
["title"=>"1","src"=>"face/03.gif"],
["title"=>"1","src"=>"face/04.gif"],
["title"=>"1","src"=>"face/05.gif"],
["title"=>"1","src"=>"face/06.gif"],
["title"=>"1","src"=>"face/07.gif"],
["title"=>"1","src"=>"face/08.gif"],
["title"=>"1","src"=>"face/09.gif"],
["title"=>"1","src"=>"face/10.gif"],
["title"=>"1","src"=>"face/11.gif"],
["title"=>"1","src"=>"face/12.gif"],
["title"=>"1","src"=>"face/13.gif"],
["title"=>"1","src"=>"face/14.gif"],
["title"=>"1","src"=>"face/15.gif"],
["title"=>"1","src"=>"face/16.gif"],
["title"=>"1","src"=>"face/17.gif"],
["title"=>"1","src"=>"face/18.gif"],
["title"=>"1","src"=>"face/19.gif"],
["title"=>"1","src"=>"face/20.gif"],
["title"=>"1","src"=>"face/21.gif"],
["title"=>"1","src"=>"face/22.gif"],
["title"=>"1","src"=>"face/23.gif"],
["title"=>"1","src"=>"face/24.gif"],
["title"=>"1","src"=>"face/00.gif"],
];

接下来就是重点了 js部分

$("#biaoqing").click(()=>{
    $("#ku").css("display","block");
    $.ajax({
        type:"get",
        url:"biaoqing.php",
        success:function(data){
            var html="";
            for(var p of data){
            html+=`
                <img src="img/${p.src}"/>
            `
            }
            $("#ku").html(html);
            // console.log(data)
        },error:function(){
            alert("网络错误");
        }
    });
})
$("#ku").mouseleave(()=>{
    $("#ku").css("display","none").html("");
})
$("#ku").click("img",(e)=>{
    var tar=e.target;
    var a=$(tar).attr("src");
    var b=$("#saytext").html();
    var html=`<img src="${a}" />`;
// $("#saytext").append("<img src="+"'"+a+"'"+"/>");
    $("#saytext").html(b+"<img src="+"'"+a+"'"+"/>");
})
$("#btn").click(()=>{
    var b=$("#saytext").html();
    var html="";
    html=`${b} `
    // $("#show").html(html);
    $("#show").append(b);
    $("#saytext").html("");
})