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 相关文章推荐
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
微信小程序实现左右列表联动
May 19 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
让你的网站首页自动选择语言转跳
2006/12/06 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
自己动手开发jQuery插件教程
2011/08/25 Javascript
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
javascript实现下雨效果
2017/03/27 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
python 连续不等式语法糖实例
2020/04/15 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
总监职责范文
2013/11/09 职场文书
善意的谎言事例
2014/02/15 职场文书
《母鸡》教学反思
2014/02/25 职场文书
大学生实习推荐信
2015/03/27 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技