JQuery 实例：微博 显示添加'@好友',添加小表情
来源：互联网 发布：阿里数据竞赛 编辑：程序博客网 时间：2024/04/29 02:02
<!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>阅读全文
0 0
- JQuery 实例：微博 显示添加'@好友',添加小表情
- 添加好友
- 添加qq好友 msn的显示
- QQ 添加分组 添加好友
- 阿里旺旺不显示好友，重新添加时，却显示好友已经存在 的解决办法
- 添加qq好友
- 【openfire添加好友流程】
- openfire 自动添加好友
- XMPP之添加好友
- openfire 添加好友
- 网站添加好友功能
- SHUOJ添加好友
- 环信添加好友
- BBS添加表情
- EditText添加表情
- EditText用法--添加表情
- Textview\EditText添加表情
- NSMutableAttributedString 中添加表情
- Django框架学习笔记（16.利用ajax实现简易的验证）
- Spark Streaming 监控HDFS目录
- leetcode 581[easy]---- Shortest Unsorted Continuous Subarray
- ajax get请求乱码，后台获取url中参数乱码解决方案
- Add Two Numbers[LeetCode 2]
- JQuery 实例：微博 显示添加'@好友',添加小表情
- 面向对象基础笔记
- okhttp源码简
- zabbix邮件报警配置
- Spark Streaming 监控通过 nc -lk 9999 命令发送的word计数
- Ubuntu挂载exFAT文件系统
- c语言的文件操作
- JDBC连接Oracle报错ORA-12505
- 3-9·CentOS7版本基本网络设置
