Jquery melaksanakan penyiaran meniru Tencent Weibo

Prakata: Memandangkan saya telah mempelajari beberapa pengetahuan tentang Jquery hari ini, saya merasakan bahawa Jquery terlalu berkuasa daripada sebelumnya Banyak fungsi mudah yang digunakan untuk memerlukan berpuluh-puluh baris kod dalam JavaScript tetapi hanya menggunakan beberapa baris kod dalam Jquery. . Itu sahaja, jadi saya memutuskan untuk belajar Jquery dengan bersungguh-sungguh mudah diselesaikan, ketahui lebih lanjut tentang beberapa kaedah, peristiwa, dsb. Jadi saya melaksanakan Jquery di sini untuk meniru penerbitan siaran Tencent yang tidak seberapa.

1. Buat halaman HTML baharu dan perkenalkan fungsi yang ingin saya capai

(1) Buat halaman HTML baharu seperti berikut

(2) Fungsi pertama, apabila tetikus meluncur ke atas gambar siaran, ia akan bertukar kepada gambar lain dengan warna yang lebih terang, dan ia akan kembali kepada keadaan asal apabila meninggalkannya

(3) Fungsi kedua ialah apabila anda memasukkan teks ke dalam kotak input teks dan tidak memasukkan perkataan, bilangan perkataan yang ditunjukkan di bahagian bawah dikurangkan sebanyak 1. Jika ia melebihi bilangan, pengguna akan digesa berapa banyak perkataan telah melebihi

(4) Fungsi ketiga ialah klik butang topik Jika kotak teks kosong, #Sila masukkan maklumat topik # akan dimasukkan, dan sila masukkan maklumat topik untuk diserlahkan. tiada apa yang akan dipaparkan. Jangan masukkan

(5) Fungsi keempat ialah apabila rakan diklik, lapisan akan dijana di bawah untuk memaparkan rakan pengguna Apabila pengguna mengklik rakan, nama akan dipaparkan dalam kotak teks

(6) Fungsi kelima, apabila pengguna mengklik pada emotikon, emotikon yang biasa digunakan QQ akan dipaparkan, dan kemudian pengguna boleh memilih emotikon untuk diklik dan dipaparkan dalam kotak teks ini pada asasnya sebagai fungsi keempat, seperti berikut Fungsi diterangkan di bawah

2. Fungsi pertama

　(1) Gambar rajah paparan fungsi

Memandangkan ini hanyalah kesan gelongsor mudah, tangkapan skrin tidak kelihatan jelas, jadi saya hanya menyiarkan kod

　(2) Kod

Salin kod Kod adalah seperti berikut:

//Sedari reaksi perubahan menggerakkan gambar ke atas dan ke bawah

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

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

　　}).mouseout(fungsi () {

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

　　});

3. Fungsi kedua

　(1) Tangkapan skrin fungsi

　(2) Kod

Salin kod Kod adalah seperti berikut:

//Realisasikan perubahan dalam bilangan aksara input

　　$("#msgTxt").tukar(fungsi () {

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

panjang var = 140 - panjang dunia;

​jika (panjang < 0) {

$("#sendBox span.countTxt").html("Anda telah melebihi " Math.abs(panjang) " perkataan"); >
}lain {

​$("#sendBox span.countTxt").html("Anda juga boleh memasukkan " panjang "words");

}

});

setInterval(fungsi () {

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

}, 20);

4. Fungsi ketiga

　(1) Tangkapan skrin fungsi

　(2)Kod

Salin kod Kod adalah seperti berikut:

//Sahkan teks maklumat output (sila masukkan maklumat topik untuk dipaparkan dalam warna merah) 

/*

Panjangkan kaedah untuk memilih teks untuk jQuery

*/

$.fn.selectRange = fungsi (mula, tamat) {

        var curObj = $(this).get(0);

            jika (!curObj) kembali;

            jika tidak (curObj.setSelectionRange) {

                                            curObj.focus();

                 curObj.setSelectionRange(mula, tamat);

             } /* WebKit */

            jika tidak (curObj.createTextRange) {

            julat var = curObj.createTextRange();

                 julat. runtuh(benar);

                 julat.moveEnd('watak', tamat);

                 julat.moveStart('watak', mula);

                  julat.select();

                         /* IAITU */

             jika tidak (curObj.selectionStart) {

makluman('aaaaaaaa');

CurObj.selectionStart = mula;

CurObj.selectionEnd = tamat;

          }

};

//Klik output topik#Sila masukkan maklumat topik#

​​​ $("#funBox a.creatNew").klik(fungsi () {

Jika ($.trim($("#msgTxt").val()).panjang == 0) {

                $("#msgTxt").val("#Sila masukkan maklumat topik#").selectRange(1, 8);

         }

});

5. Fungsi keempat

　(1) Tangkapan skrin fungsi

　(2)Kod

Salin kod Kod adalah seperti berikut:

//Realisasikan paparan maklumat rakan apabila mengklik butang rakan
var friendList = ["Dai Zhong", "Xiao Meng", "Ren Shoulong", "Dai Wei", "Maria", "Han Yinglong", "Sheng Jingheng", "Feifei", "Xiao Xian", " Yuanfang" ];
$("#funBox a.atSome").klik(fungsi () {
//Lapisan div dengan id seperti tahap yang ditakrifkan di atas ialah position:absolution
$("

").appendTo("#funBox");
//Gunakan $.each untuk mengulung nilai tatasusunan dan menambahnya pada lapisan
Jika ($("#level").text() == "") {
$.setiap(friendList, fungsi () {
//Melintasi dan menambah transformasi gaya li pada lapisan
$("

@" ini "

").css("kursor", "penunjuk"). mouseover(fungsi () {
                $(this).css("backgroundColor", "kuning").siblings().css("backgroundColor", "white");
                }).appendTo($("#ul")).klik(fungsi () {
//Apabila melaksanakan gaya klik, tulis nilai pada
                $("#msgTxt").val($("#msgTxt").val() $(this).text());
            })
})
};
//Bagaimana untuk menentukan sama ada pengguna mengklik butang
$("#level").mouseleave(fungsi () {
$("#level").remove();
})
//Letakkan lokasi modul yang dibuat
$("#level").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). kiri "px");
});

6. Fungsi kelima

　(1) Tangkapan skrin fungsi

　(2)Kod

Salin kod Kod adalah seperti berikut:

//Realisasikan fungsi emotikon QQ
var userFaces = { '0.gif': 'Senyum', '1.gif': 'Pout', '2.gif': 'Color', '3.gif': 'Daze', '4.gif': 'Bangga', '5.gif': 'Menangis', '6.gif': 'Malu', '7.gif': 'Diam', '8.gif': 'Tidur', '9.gif' : 'menangis', '10.gif': 'malu', '11.gif': 'marah', '12.gif': 'nakal', '13.gif': 'terpampang gigi', '14 ': 'terkejut', '15.gif': 'sedih', '16.gif': 'sejuk', '17.gif': 'peluh sejuk', '18.gif': 'gila', '19 . gif': 'muntah', '20.gif': 'smirk', '21.gif': 'comel', '22.gif': 'gulung mata', '23.gif': 'sombong', ' 24 .gif': 'lapar', '25.gif': 'mengantuk', '26.gif': 'takut', '27.gif': 'berpeluh', '28.gif': 'ketawa bodoh', ' 29.gif': 'Askar', '30.gif': 'Perjuangan', '31.gif': 'Bersumpah', '32.gif': 'Soalan', '33.gif': 'Diam', ' 34.gif': 'pengsan', '35.gif': 'penyiksaan', '36.gif': 'degenerasi', '37.gif': 'rangka', '38.gif': 'pukul', ' 39.gif': 'Selamat tinggal', '40.gif': 'Lap peluh', '41.gif': 'Jemput hidung', '42.gif': 'Tepuk tangan', '43.gif': 'Malu ' Besar', '44.gif': 'Senyuman', '45.gif': 'Bersenandung kiri', '46.gif': 'Bersenandung kanan', '47.gif': 'Menguap', ' 48.gif ': 'penghinaan', '49.gif': 'rungutan', '50.gif': 'hampir menangis', '51.gif': 'insidious', '52.gif': 'ciuman', '53. gif': 'Seram', '54.gif': 'Lemah', '55.gif': 'Chopper', '56.gif': 'Tembikai', '57.gif': 'Beer', '58. gif': 'Bola Keranjang', '59.gif': 'Ping Pong', '60.gif': 'Kopi', '61.gif': 'Nasi', '62.gif': 'Kepala Babi', ' 63.gif': 'Rose', '64.gif': 'Wither', '65.gif': 'Show love', '66.gif': 'Love', '67.gif': 'Heart Broken' , '68.gif': 'Kek', '69.gif': 'Kilat', '70.gif': 'Bom', '71.gif': 'Pisau', '72.gif': ' Bola Sepak' , '73.gif': 'Ladybug', '74.gif': 'Poop', '75.gif': 'Moon', '76.gif': 'Sun', '77.gif': 'hadiah' , '78.gif': 'peluk', '79.gif': 'kuat', '80.gif': 'lemah', '81.gif': 'jabat tangan', '82.gif': 'Kemenangan' , '83.gif': 'Fist', '84.gif': 'Merayu', '85.gif': 'Fist', '86.gif': 'Miskin', '87.gif': 'Love you ', '88.gif': 'NO', '89.gif': 'OK', '90.gif': 'Cinta', '91.gif': 'Tiup ciuman', '92.gif' : 'melompat', '93.gif': 'gementar', '94.gif': 'terbakar', '95.gif': 'berpusing dalam bulatan', '96.gif': 'kowtow', '97 ': 'patah balik', '98.gif': 'lompat tali', '99.gif': 'melambai', '100.gif': 'teruja', '101.gif': 'tarian jalanan', ' 102. gif': 'Kiss', '103.gif': 'Left Tai Chi', '104.gif': 'Right Tai Chi', '105.gif': 'Calm', '106.gif': ' Pening', '107.gif': 'Ketidakpuasan hati', '108.gif': 'Tidur', '109.gif': 'Nakal sikit', '110.gif': 'Mengumpat', '111.gif': 'Marah' , '112.gif': 'ketawa', '113.gif': 'tersenyum', '114.gif': 'terkejut', '115.gif': '囧' };
$("#funBox a.insertFace").klik(fungsi () {
$("

").appendTo("#funBox");
$.each(Muka pengguna, fungsi (kunci, nilai) {
$(" value

").css("cursor", "pointer").appendTo("#Userfaces").klik(function () {
$("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
//Sama seperti di atas, cara untuk menentukan sama ada pengguna mengklik butang
$("#Userfaces").mouseleave(fungsi () {
$("#Userfaces").remove();
});
//Peletakan
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). kiri "px");
});

Baiklah, kita ada semua fungsi yang sepatutnya ada untuk kecantikan, kawan-kawan boleh buat sendiri

Jquery melaksanakan penyiaran meniru Tencent Weibo_jquery