jQueryday11(输入表情

主体

<script src="jquery-3.2.1.min.js">script>
<script src="js/face.js">script>
<style >
.sendBtn{
    width: 300px;
    height: 100px;
    background:url(img/1.png) -222px -200px no-repeat;
}
.sendBtn:hover{
    background:url(img/1.png) -333px -200px no-repeat;
}
.insert{
    position: absolute;/* 绝对定位 也包裹了子元素 */
    width: 50px;
    height: 300px;
}
img{
    height: 50px;
    width: 50px;
}
style>
<script>
    $(function () {

    })
script>
head>
<body>
    <button class="sendBtn">button>
    <div class="insert">div>
    <textarea id="Txt">11textarea>
body>

js文件获取图像获取图像属性

var face = {'1.png':'hh','2.png':'xx'};
//页面加载完成后初始化表情的div
$(function(){
    var $faceDiv = $("
"
); for (var key in face) { //key 1.png 因为是在微博的同级 所以直接用img文件夹就能检索到图片 var $img = $(""</span>+face[key]+<span class="hljs-string">""); $faceDiv.append($img); } $(".insert").append($faceDiv).hover(function(){ $faceDiv.show(); },function(){ $faceDiv.hide(); }); $faceDiv.hide(); $faceDiv.on('click', 'img', function(event) { event.preventDefault(); //获取alt属性 var str = $(this).attr('alt'); $("#Txt").text($("#Txt").text()+"["+str+"]"); /* Act on the event */ }); $faceDiv.find("img"); });

你可能感兴趣的:(jquery)