JQuery 实例：微博显示添加'@好友',添加小表情

最新推荐文章于 2020-01-26 19:08:04 发布
houyanhua1
最新推荐文章于 2020-01-26 19:08:04 发布
阅读量437
点赞数
分类专栏： JQuery 文章标签： jquery
本文链接：https://blog.csdn.net/houyanhua1/article/details/78841252
版权
JQuery 专栏收录该内容
57 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>腾讯微博</title>
    <link href="css/main.css" rel="stylesheet" />
    <script src="../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困', '26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险', '52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电', '70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱', '79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头', '97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极', '105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧' };


        //点击好友时的要求：只出现一个div好友列表
        $(function () {
            //设置文本框默认值
            $('#msgTxt').val('#输入话题标题#')
                //计算字符个数
                .keyup(function() {
                    var txtLength =140- $(this).val().length;
                    if (txtLength >= 0) {//在140范围内
                        $('.countTxt').css('color','black').html('还能输入<em>'+txtLength+'</em>字');
                    } else {//超过
                        $('.countTxt').css('color', 'red').html('已经超过<em>'+-1*txtLength+'</em>字');
                    }
                });
            
            //广播点击事件
            $('.sendBtn').click(function () {
                //如果文本框空，则设置默认值
                if ($('#msgTxt').val() == '') {
                    $('#msgTxt').val('#输入话题标题#');
                }
                //如果值是#输入话题标题#，则让文本高亮显示
                if ($('#msgTxt').val() == '#输入话题标题#') {
                    $('#msgTxt')[0].setSelectionRange(1, 7);  //[0]表示将JQuery对象转成DOM对象，setSelectionRange() 方法是DOM对象的方法，表示选中。
                }
            })
                //设置广播的背景图片
                .hover(function() {//移上
                    $(this).css('background-position','-0px -195px');
                }, function() {//移开
                    $(this).css('background-position', '-117px -165px');
                });
            
            //@好友
            $('.atSome').click(function(e) {
                var friendsList = ['中国', '日本', '韩国', '朝鲜', '蒙古'];
                var divFriendList = $('#divFriendList');
                //判断是否已经有一个叫divFriendList的div，如果有，则什么也不做，如果没有，则新建
                if (divFriendList.length > 0) {
                    return;
                }
                divFriendList = $('<div id="divFriendList"></div>').css({
                    'position': 'absolute',
                    'left': e.clientX + 'px',
                    'top': e.clientY + 'px',
                    'width': '50px',
                    'height': '100px',
                    'border': '1px solid red',
                    'background-color': '#a7a7a7',
                    'padding':'5px'
                }).appendTo('body');
                $.each(friendsList, function() {
                    $('<span>' + this + '</span><br>')
                        .css('cursor','pointer')//设置小手图标
                        .one('click',function() {//在对象上执行一次指定事件
                            $('#msgTxt').val($('#msgTxt').val()+'@'+$(this).text());
                        })
                        .appendTo(divFriendList);//将span显示到div上
                });
                //增加一个关闭的图标
                $('<span>×</span>')
                    .css('cursor', 'pointer')//设置小手图标
                    .click(function() {
                        divFriendList.remove();
                    })
                    .appendTo(divFriendList);
            });
            
            //添加表情
            $('.insertFace').click(function(e) {
                var divFace = $('#divFace');
                if (divFace.length > 0) {
                    return;//如果显示表情的div已经存在，则不做任何操作
                }
                divFace = $('<div id="divFace"></div>')
                    .css({
                        'position': 'absolute',
                        'left': e.clientX + 'px',
                        'top': e.clientY + 'px',
                        'width': '300px',
                        'height': '300px',
                        'border': '1px solid red',
                        'background-color': '#a7a7a7',
                        'padding': '5px'
                    }).appendTo('body');
                //遍历表情键值对
                $.each(userFaces, function(key, value) {
                    $('<img src="faces/' + key + '" id="' + value + '" />"')
                        .click(function() {//点击图片，添加表情
                            $('#msgTxt').val($('#msgTxt').val() + '[' + $(this).attr('id') + ']');
                        })
                        .appendTo(divFace);//将图片添加到div上
                });
                //关闭按钮
                $('<br><br><span>×</span>')
                    .css('cursor', 'pointer')
                    .click(function() {
                        divFace.remove();//点击关闭表情的div
                    }).appendTo(divFace);
            });
        });
    </script>
</head>
<body>
    <img id="logo" src="img/b3_100901.png" alt="" />
    <center>
        <div id="myBody">
            <div id="myBdLeft">
                <div id="talkBox">
                    <h2>
                        <a>夏天来了，你懂得......</a></h2>
                    <textarea id="msgTxt"></textarea>
                    <div id="funBox">
                        <a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
                            class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
                        <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
                            class="uploadVideo">视频</a>
                    </div>
                    <div id="sendBox">
                        <input type="button" class="sendBtn" value="" />
                        <span class="countTxt">还能输入<em>140</em>字</span>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
</html>