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 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
js验证账户名是否重复
May 26 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
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP中soap的用法实例
2014/10/24 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
分享php多功能图片处理类
2016/05/15 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
Python中Class类用法实例分析
2015/11/12 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
通过Pandas读取大文件的实例
2018/06/07 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
python实现图片转字符画
2021/02/19 Python
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
过滤器的用法
2013/10/08 面试题
集体婚礼策划方案
2014/02/22 职场文书
党支部承诺书范文
2014/03/28 职场文书
公司给客户的感谢信
2015/01/23 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS