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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
JS实现十分钟倒计时代码实例
Oct 18 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP异常处理Exception类
2015/12/11 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python爬虫常用的模块分析
2014/08/29 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python实现简单成绩录入系统
2019/09/19 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
python中二分查找法的实现方法
2020/12/06 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
HTML5 Convas APIs方法详解
2015/04/24 HTML / CSS
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
C#面试题
2016/05/06 面试题
UNIX文件系统常用命令
2012/05/25 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
初中政治教学反思
2014/01/17 职场文书
地球一小时倡议书
2014/04/15 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
纪检监察建议书
2014/05/19 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
小学英语课教学反思
2016/02/15 职场文书
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS