Jquery實(shí)現(xiàn)仿騰訊微博發(fā)表廣播_jquery

　　前言： 由于這幾天在學(xué)習(xí)Jquery的一些知識(shí)，比以前的感覺(jué)就是Jquery太強(qiáng)大了，很多很簡(jiǎn)單的功能以前在JavaScript要寫幾十行的代碼而在Jquery中只用幾行代碼就搞定了，所以我決定好好學(xué)習(xí)學(xué)習(xí)Jquery，支持我吧，呵呵，這幾天的學(xué)習(xí)Jquey使我感覺(jué)到其實(shí)Jquery的使用并不是很難，就我感覺(jué)Jquery只要把選擇器學(xué)的差不多，其他的基本都可以迎刃而解，多了解一些方法，事件等等。所以我在這里實(shí)現(xiàn)了一個(gè)Jquery實(shí)現(xiàn)仿騰訊微薄的廣播發(fā)表。

1. 首先新建HTML頁(yè)面和介紹我要實(shí)現(xiàn)什么功能

　　(1) 新建HTML頁(yè)面如下

　　(2)第一個(gè)功能，當(dāng)鼠標(biāo)滑動(dòng)到廣播圖片上面的話會(huì)變成另一副顏色淺點(diǎn)的圖片，離開(kāi)的時(shí)候恢復(fù)原始狀態(tài)

　　(3)第二個(gè)功能，當(dāng)往輸入文字的框里面輸入文字的時(shí)候沒(méi)輸入一個(gè)字，底下提示字?jǐn)?shù)的地方減1，如果超過(guò)的話，將提示用戶超過(guò)了多少字

　　(4)第三個(gè)功能，單擊話題按鈕，如果文本框?yàn)榭盏脑拰⑤斎?請(qǐng)輸入話題信息#，并且請(qǐng)輸入話題信息高亮顯示，如果文本框不為空的話就什么都不輸入

　　(5)第四個(gè)功能，當(dāng)單擊朋友的話會(huì)在底下生成一個(gè)層，顯示用戶的朋友，當(dāng)用戶單擊朋友的時(shí)候就會(huì)將名字顯示在文本框中

　　(6)第五個(gè)功能，當(dāng)用戶單擊表情的時(shí)候，會(huì)顯示QQ的常用表情，然后用戶可以選擇表情單擊顯示在文本框中，這個(gè)和第四個(gè)功能基本上一樣，下面一個(gè)一個(gè)的功能說(shuō)以下

2.第一個(gè)功能

　　(1) 功能展示圖

　　　　由于這個(gè)只是一個(gè)簡(jiǎn)單的滑動(dòng)效果，所以截圖看起來(lái)不明顯，就只貼代碼了

　　(2) 代碼

代碼如下:
　　　　//實(shí)現(xiàn)圖片的移動(dòng)上去和下來(lái)的變化反應(yīng)
　　　　$("#sendBox :button.sendBtn").mouseover(function () {
　　　　 $(this).css("backgroundPosition", "0 -196px");
　　　　}).mouseout(function () {
　　　　 $(this).css("backgroundPosition", "-117px -165px");
　　　　});

3.第二個(gè)功能

　　(1) 功能截圖

　　　　

　　(2) 代碼

代碼如下:
　　　　//實(shí)現(xiàn)輸入字?jǐn)?shù)的變化
　　　　$("#msgTxt").change(function () {
　　var world = $("#msgTxt").val();
　　 var length = 140 - world.length;
　　if (length < 0) {
　　 $("#sendBox span.countTxt").html("您已經(jīng)超出了" + Math.abs(length) + "個(gè)字");
　　 }else {
　　$("#sendBox span.countTxt").html("您還能輸入" + length + "字");
　　 }
　　 });
　　 setInterval(function () {
　　$("#msgTxt").change();
　　 }, 20);

4.第三個(gè)功能

　　(1)功能截圖

　　　　

　　(2)代碼

代碼如下:
//確認(rèn)輸出的信息的文字(請(qǐng)輸入話題信息顯示紅色)
/*
為jQuery擴(kuò)展一個(gè)選擇文本呢的方法
*/
$.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;
}
};
//單擊話題輸出#請(qǐng)輸入話題信息#
$("#funBox a.creatNew").click(function () {
if ($.trim($("#msgTxt").val()).length == 0) {
$("#msgTxt").val("#請(qǐng)輸入話題信息#").selectRange(1, 8);
}
});

5.第四個(gè)功能

　　(1)功能截圖

　　　　

　　(2)代碼

代碼如下:
//實(shí)現(xiàn)單擊朋友按鈕的時(shí)候顯示出朋友的信息
var friendList = ["代忠", "小猛", "任首龍", "戴偉", "瑪利亞", "韓迎龍", "盛敬恒", "飛飛", "小賢", "元芳"];
$("#funBox a.atSome").click(function () {
//在上面定義id為level的div層是position:absolution
$("").appendTo("#funBox");
//使用$.each循環(huán)遍歷數(shù)組的值加入到層中
if ($("#level").text() == "") {
$.each(friendList, function () {
//遍歷給層中加入li樣式變換
$("

@" + this + "

").css("cursor", "pointer").mouseover(function () {
$(this).css("backgroundColor", "yellow").siblings().css("backgroundColor", "white");
}).appendTo($("#ul")).click(function () {
//實(shí)現(xiàn)單擊樣式的時(shí)候講值寫入到
$("#msgTxt").val($("#msgTxt").val() + $(this).text());
})
})
};
//如何判斷一個(gè)用戶是否點(diǎn)擊了一個(gè)按鈕
$("#level").mouseleave(function () {
$("#level").remove();
})
//擺放創(chuàng)建好的模塊的位置
$("#level").css("top", $(this).offset().top + $(this).height + "px").css("left", $(this).offset().left + "px");
});

6.第五個(gè)功能

　　(1)功能截圖

　　　　

　　(2)代碼

代碼如下:
　　//實(shí)現(xiàn)QQ表情的功能
var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '發(fā)呆', '4.gif': '得意', '5.gif': '流淚', '6.gif': '害羞', '7.gif': '閉嘴', '8.gif': '睡', '9.gif': '大哭', '10.gif': '尷尬', '11.gif': '發(fā)怒', '12.gif': '調(diào)皮', '13.gif': '呲牙', '14.gif': '驚訝', '15.gif': '難過(guò)', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可愛(ài)', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饑餓', '25.gif': '困', '26.gif': '驚恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奮斗', '31.gif': '咒罵', '32.gif': '疑問(wèn)', '33.gif': '噓', '34.gif': '暈', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髏', '38.gif': '敲打', '39.gif': '再見(jiàn)', '40.gif': '擦汗', '41.gif': '摳鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '壞笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙視', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '陰險(xiǎn)', '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': '示愛(ài)', '66.gif': '愛(ài)心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '閃電', '70.gif': '炸彈', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢蟲', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太陽(yáng)', '77.gif': '禮物', '78.gif': '擁抱', '79.gif': '強(qiáng)', '80.gif': '弱', '81.gif': '握手', '82.gif': '勝利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳頭', '86.gif': '差勁', '87.gif': '愛(ài)你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '愛(ài)情', '91.gif': '飛吻', '92.gif': '跳跳', '93.gif': '發(fā)抖', '94.gif': '慪火', '95.gif': '轉(zhuǎn)圈', '96.gif': '磕頭', '97.gif': '回頭', '98.gif': '跳繩', '99.gif': '揮手', '100.gif': '激動(dòng)', '101.gif': '街舞', '102.gif': '獻(xiàn)吻', '103.gif': '左太極', '104.gif': '右太極', '105.gif': '淡定', '106.gif': '暈', '107.gif': '不滿', '108.gif': '睡覺(jué)', '109.gif': '小調(diào)皮', '110.gif': '咒罵', '111.gif': '發(fā)怒', '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震驚', '115.gif': '囧' };
$("#funBox a.insertFace").click(function () {
$("").appendTo("#funBox");
$.each(userFaces, function (key, value) {
$("").css("cursor", "pointer").appendTo("#Userfaces").click(function () {
$("#msgTxt").val($("#msgTxt").val() + "[" + $(this).attr("title") + "]");
});
});
//和上面的一樣，如何判斷一個(gè)用戶是否單擊了一個(gè)按鈕
$("#Userfaces").mouseleave(function () {
$("#Userfaces").remove();
});
//擺放位置
$("#Userfaces").css("top", $(this).offset().top + $(this).height + "px").css("left", $(this).offset().left + "px");
});

好了該有的功能都有了，美化的事情，小伙伴們自己來(lái)吧

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com