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)代码
5.第四个功能
(1)功能截图
(2)代码
6.第五个功能
(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
|
//实现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"
);
});<br> 源码下载地址：<a href=
"http://download.csdn.net/detail/hanyinglong/4665316"
>http://download.csdn.net/detail/hanyinglong/4665316</a>
|
作者：韩迎龙
出处：http://www.cnblogs.com/hanyinglong
：208583543
本页版权归作者和博客园所有，欢迎转载，但未经作者同意必须保留此段声明， 且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利