Jquery实现仿腾讯微薄的广播发表

标签：style   blog   http   color   io   os   使用   ar   java   

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

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

　　(1)   新建HTML页面如下

　　(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)   功能截图

　　(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)功能截图

　　(2)代码

5.第四个功能

　　(1)功能截图

　　(2)代码

6.第五个功能

　　(1)功能截图

　　(2)代码