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

  前言: 由于这几天在学习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>" + 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)代码

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgswfp.html