原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
Jquery实现仿腾讯微薄的广播发表
Jquery实现仿腾讯微薄的广播发表
前言： 由于这几天在学习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)代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59 //确认输出的信息的文字(请输入话题信息显示红色)
?
?????/*
?
?????为jQuery扩展一个选择文本呢的方法
?
?????*/
?
?????$.fn.selectRange = function (start, end) {
?
?????????var curObj = $(this).get(0);
?
?????????if (!curObj) return;
?
?????????else if (curObj.setSelectionRange) {
?
?????????牋牋燾urObj.focus(); tSe
?
牋牋牋牋牋牋牋curObj.setSelectionRange(start, end); {
15
?
牋牋牋牋爙 /* WebKit */elect
?
牋牋牋牋爀lse if (curObj.createTextRange) {
文档评论（0）