Jquery实现仿腾讯微博发表广播


Posted in Javascript onNovember 17, 2014

前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学习学习Jquery,支持我吧,呵呵,这几天的学习Jquey使我感觉到其实Jquery的使用并不是很难,就我感觉Jquery只要把选择器学的差不多,其他的基本都可以迎刃而解,多了解一些方法,事件等等。所以我在这里实现了一个Jquery实现仿腾讯微薄的广播发表。

1. 首先新建HTML页面和介绍我要实现什么功能

(1) 新建HTML页面如下

Jquery实现仿腾讯微博发表广播

(2)第一个功能,当鼠标滑动到广播图片上面的话会变成另一副颜色浅点的图片,离开的时候恢复原始状态

(3)第二个功能,当往输入文字的框里面输入文字的时候没输入一个字,底下提示字数的地方减1,如果超过的话,将提示用户超过了多少字

(4)第三个功能,单击话题按钮,如果文本框为空的话将输入#请输入话题信息#,并且请输入话题信息高亮显示,如果文本框不为空的话就什么都不输入

(5)第四个功能,当单击朋友的话会在底下生成一个层,显示用户的朋友,当用户单击朋友的时候就会将名字显示在文本框中

(6)第五个功能,当用户单击表情的时候,会显示QQ的常用表情,然后用户可以选择表情单击显示在文本框中,这个和第四个功能基本上一样,下面一个一个的功能说以下

2.第一个功能

(1) 功能展示图

由于这个只是一个简单的滑动效果,所以截图看起来不明显,就只贴代码了

(2) 代码

//实现图片的移动上去和下来的变化反应


$("#sendBox :button.sendBtn").mouseover(function () {


 $(this).css("backgroundPosition", "0 -196px");


}).mouseout(function () {


 $(this).css("backgroundPosition", "-117px -165px");


});

3.第二个功能

(1) 功能截图

Jquery实现仿腾讯微博发表广播

(2) 代码

//实现输入字数的变化


$("#msgTxt").change(function () {

var world = $("#msgTxt").val();

 var length = 140 - world.length;

if (length < 0) {

 $("#sendBox span.countTxt").html("您已经超出了<em style='color:#E56C0A;'>" + Math.abs(length) + "</em>个字");

 }else {

$("#sendBox span.countTxt").html("您还能输入<em>" + length + "</em>字");

 }

 });

 setInterval(function () {

$("#msgTxt").change();

 }, 20);

4.第三个功能

(1)功能截图

Jquery实现仿腾讯微博发表广播

(2)代码

//确认输出的信息的文字(请输入话题信息显示红色)

     /*

     为jQuery扩展一个选择文本呢的方法

     */

     $.fn.selectRange = function (start, end) {

         var curObj = $(this).get(0);

         if (!curObj) return;

         else if (curObj.setSelectionRange) {

              curObj.focus();

              curObj.setSelectionRange(start, end);

         } /* WebKit */

         else if (curObj.createTextRange) {

               var range = curObj.createTextRange();

               range.collapse(true);

               range.moveEnd('character', end);

               range.moveStart('character', start);

               range.select();

          } /* IE */

          else if (curObj.selectionStart) {

               alert('aaaaaaaa');

               curObj.selectionStart = start;

               curObj.selectionEnd = end;

          }

      };

      //单击话题输出#请输入话题信息#

      $("#funBox a.creatNew").click(function () {

         if ($.trim($("#msgTxt").val()).length == 0) {

            $("#msgTxt").val("#请输入话题信息#").selectRange(1, 8);

         }

      });

5.第四个功能

(1)功能截图

Jquery实现仿腾讯微博发表广播

(2)代码

//实现单击朋友按钮的时候显示出朋友的信息

     var friendList = ["代忠", "小猛", "任首龙", "戴伟", "玛利亚", "韩迎龙", "盛敬恒", "飞飞", "小贤", "元芳"];

     $("#funBox a.atSome").click(function () {

         //在上面定义id为level的div层是position:absolution

         $("<div id='level'><ul id='ul' style='margin:0;padding:0;list-style-type:none'></ul></div>").appendTo("#funBox");

         //使用$.each循环遍历数组的值加入到层中

         if ($("#level").text() == "") {

              $.each(friendList, function () {

                //遍历给层中加入li样式变换

                $("<li>@" + this + "</li>").css("cursor", "pointer").mouseover(function () {

                $(this).css("backgroundColor", "yellow").siblings().css("backgroundColor", "white");

             }).appendTo($("#ul")).click(function () {

             //实现单击样式的时候讲值写入到

            $("#msgTxt").val($("#msgTxt").val() + $(this).text());

           })

        })

      };

    //如何判断一个用户是否点击了一个按钮

     $("#level").mouseleave(function () {

         $("#level").remove();

     })

      //摆放创建好的模块的位置

      $("#level").css("top", $(this).offset().top + $(this).height + "px").css("left", $(this).offset().left + "px");

    });

6.第五个功能

(1)功能截图

Jquery实现仿腾讯微博发表广播

(2)代码

//实现QQ表情的功能

     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': '?? };

  $("#funBox a.insertFace").click(function () {

     $("<div id='Userfaces'></div>").appendTo("#funBox");

     $.each(userFaces, function (key, value) {

        $("<img src='faces/" + key + "' title=" + value + ">").css("cursor", "pointer").appendTo("#Userfaces").click(function () {

      $("#msgTxt").val($("#msgTxt").val() + "[" + $(this).attr("title") + "]");

     });

   });

  //和上面的一样,如何判断一个用户是否单击了一个按钮

   $("#Userfaces").mouseleave(function () {

        $("#Userfaces").remove();

    });

    //摆放位置

   $("#Userfaces").css("top", $(this).offset().top + $(this).height + "px").css("left", $(this).offset().left + "px");

});

好了该有的功能都有了,美化的事情,小伙伴们自己来吧

Javascript 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
Jquery解析json数据详解
Dec 26 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 #Javascript
jquery 实现返回顶部功能
Nov 17 #Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 #Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 #Javascript
javascript将url中的参数加密解密代码
Nov 17 #Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 #Javascript
PHP PDO操作总结
Nov 17 #Javascript
You might like
使用eAccelerator加密PHP程序
2008/10/03 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
django 自定义过滤器的实现
2019/02/26 Python
Python实现最常见加密方式详解
2019/07/13 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
幼儿园春游活动方案
2014/01/19 职场文书
关于迟到的检讨书
2014/01/26 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
品牌转让协议书
2014/08/20 职场文书
安全责任书范文
2014/08/25 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
库房管理员岗位职责
2015/02/12 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
电频谱管理的原则是什么
2022/02/18 无线电