JqueryがTencent Weibo_jqueryを模倣したブロードキャストを実装-jsチュートリアル-php.cn

JqueryがTencent Weibo_jqueryを模倣したブロードキャストを実装

WBOY

リリース： 2016-05-16 16:31:02

オリジナル

1357 人が閲覧しました

まえがき: 最近、Jquery についての知識を少し勉強しているので、以前は JavaScript では数十行のコードを必要とする単純な関数が多かったのですが、Jquery では数行のコードしか使用しません。ということで、Jqueryを勉強することにしました。よろしくお願いします。最近Jqueyを勉強していると、Jqueryを使うのは基本だけで十分だと感じています。簡単に解決できる場合は、いくつかの方法やイベントなどについて詳しく学習してください。そこで、Tencent の貧弱なブロードキャストパブリッシングを模倣するために、ここに Jquery を実装しました。

1. まず新しい HTML ページを作成し、実現したい機能を紹介します

(1) 以下のように新しい HTML ページを作成します

(2) 最初の機能は、放送画像上でマウスをスライドさせると、明るい色の別の画像に変わり、離れると元の状態に戻ります

(3) 2 つ目の機能は、テキスト入力ボックスにテキストを入力し、単語を入力しないと、下部に表示される単語数が 1 減ります。それを超えると、ユーザーは何ワードを超えたかを尋ねるプロンプト

(4) 3 番目の機能は、トピックボタンをクリックすることです。テキストボックスが空の場合は、# トピック情報を入力してください。テキストボックスが空でない場合は、強調表示するトピック情報を入力してください。

は何も表示されません。

(5) 4 番目の機能は、友達をクリックすると、その下にユーザーの友達を表示するレイヤーが生成され、ユーザーが友達をクリックすると、テキストボックスに名前が表示されます。

(6) 5 番目の機能は、ユーザーが絵文字をクリックすると、QQ でよく使用される絵文字が表示され、クリックしてテキストボックスに表示する絵文字を選択できます。これは基本的に同じです。 4 番目の関数として次のようにします。関数については以下で説明します

2.最初の関数

(1) 機能表示図

これは単純なスライド効果なので、スクリーンショットでは見にくいため、コードのみを投稿しました

(2)コード

コードをコピーしますコードは次のとおりです:

//画像を上下に動かす変化反応を実現

$("#sendBox :button.sendBtn").mouseover(function() {

$(this).css("backgroundPosition", "0 -196px");

}).mouseout(function() {

$(this).css("backgroundPosition", "-117px -165px");

});

3. 2 番目の機能

(1) 機能のスクリーンショット

(2)コード

コードをコピーしますコードは次のとおりです:

//入力文字数の変化を実現

$("#msgTxt").change(function() {

var world = $("#msgTxt").val();

var length = 140 - world.length;

if (長さ 
$("#sendBox scan.countTxt").html("" Math.abs(length) " 単語を超えました"); >
}else {

$("#sendBox scan.countTxt").html("" length "words" を入力することもできます");

}

});

setInterval(function() {

$("#msgTxt").change();

}, 20);

4. 3 番目の機能

(1) 機能のスクリーンショット

(2)コード

コードをコピーコードは次のとおりです:

//出力情報のテキストを確認（赤字で表示するトピック情報を入力してください）

/*

jQuery
 用にテキストを選択するメソッドを拡張します。
*/

$.fn.selectRange = 関数 (開始、終了) {

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) {

アラート('aaaaaaaa');

CurObj.selectionStart = 開始;

CurObj.selectionEnd = 終了;

}

};

//トピック出力をクリック#トピック情報を入力してください#

$("#funBox a.creatNew").click(function () {

If ($.trim($("#msgTxt").val()).length == 0) {

$("#msgTxt").val("#トピック情報を入力してください#").selectRange(1, 8);

}

});

5. 4 番目の関数

(1) 機能のスクリーンショット

(2)コード

コードをコピーコードは次のとおりです:

//フレンドボタンクリック時のフレンド情報の表示を実現
var friendsList = ["Dai Zhong"、"Xiao Meng"、"Ren Shoulong"、"Dai Wei"、"Maria"、"Han Yinglong"、"Sheng Jingheng"、"Feifei"、"Xiao Xian"、" Yuanfang" ];
$("#funBox a.atSome").click(function () {
//上で定義したレベルとして ID を持つ div レイヤーは、position:absolution
です。 $("

").appendTo("#funBox");
// $.each を使用して配列値をループし、レイヤーに追加します
If ($("#level").text() == "") {
$.each(friendList, function () {
// レイヤーをトラバースして li スタイルの変換を追加します
$("

@" this "

").css("カーソル", "ポインタ").mouseover(function () {
$(this).css("backgroundColor", " yellow").siblings().css("backgroundColor", "white");
}).appendTo($("#ul")).click(function () {
//クリックスタイルを実装する場合、
に値を書き込みます $("#msgTxt").val($("#msgTxt").val() $(this).text());
})
})
};
//ユーザーがボタンをクリックしたかどうかを判断する方法
$("#level").mouseleave(function () {
$("#level").remove();
})
//作成したモジュールの場所を配置
$("#level").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset().左 "px");
});

6. 5番目の機能

(1) 機能のスクリーンショット

(2)コード

コードをコピーコードは次のとおりです:

//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': 'いいえ'、'89.gif': 'OK'、'90.gif': '愛'、'91.gif': '投げキッス'、'92.gif' : 'ジャンプ'、'93.gif': '震え'、'94.gif': '燃える'、'95.gif': 'ぐるぐる回る'、'96.gif': 'コウトウ'、'97。 ': '振り返る'、'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 () {
$("

").appendTo("#funBox");
$.each(userFaces, 関数 (キー, 値) {
$(" 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().左 "px");
});

はい、必要な機能はすべて揃っています。美化については、友達が自分で行うことができます。