Jquery implementiert Broadcasting und imitiert Tencent Weibo_jquery

Vorwort: Da ich in letzter Zeit etwas über Jquery gelernt habe, habe ich das Gefühl, dass Jquery zu mächtig ist als zuvor. Viele einfache Funktionen erforderten in JavaScript Dutzende von Codezeilen, in Jquery wurden jedoch nur wenige Codezeilen benötigt Das war's, also habe ich beschlossen, mich intensiv mit Jquery zu beschäftigen. Haha, das Erlernen von Jquey hat mir das Gefühl gegeben, dass es nicht schwierig ist, Jquery zu lernen leicht zu lösen, erfahren Sie mehr über einige Methoden, Ereignisse usw. Deshalb habe ich hier eine Jquery implementiert, um Tencents dürftiges Broadcast-Publishing zu imitieren.

1. Erstellen Sie zunächst eine neue HTML-Seite und stellen Sie vor, welche Funktion ich erreichen möchte

(1) Erstellen Sie wie folgt eine neue HTML-Seite

(2) Die erste Funktion: Wenn die Maus über das übertragene Bild gleitet, wechselt es in ein anderes Bild mit einer helleren Farbe und kehrt beim Verlassen in den ursprünglichen Zustand zurück

(3) Die zweite Funktion besteht darin, dass, wenn Sie Text in das Texteingabefeld eingeben und kein Wort eingeben, die Anzahl der unten angezeigten Wörter um 1 reduziert wird. Wenn die Anzahl überschritten wird, wird der Benutzer benachrichtigt abgefragt, wie viele Wörter überschritten wurden

(4) Die dritte Funktion besteht darin, auf die Themenschaltfläche zu klicken. Wenn das Textfeld leer ist, wird „Bitte Themeninformationen eingeben“ eingegeben. Wenn das Textfeld nicht leer ist, geben Sie bitte die Themeninformationen ein, die hervorgehoben werden sollen. Es wird nichts angezeigt. Geben Sie nicht

ein

(5) Die vierte Funktion besteht darin, dass beim Klicken auf einen Freund eine Ebene darunter generiert wird, um die Freunde des Benutzers anzuzeigen. Wenn der Benutzer auf einen Freund klickt, wird der Name im Textfeld angezeigt

(6) Die fünfte Funktion: Wenn der Benutzer auf das Emoticon klickt, werden die häufig verwendeten Emoticons von QQ angezeigt, und dann kann der Benutzer das Emoticon auswählen, das er anklicken und im Textfeld anzeigen möchte. Dies ist im Grunde dasselbe als vierte Funktion wie folgt. Die Funktionen werden unten beschrieben

2. Die erste Funktion

　(1) Funktionsanzeigediagramm

Da es sich nur um einen einfachen Schiebeeffekt handelt, sieht der Screenshot nicht offensichtlich aus, daher habe ich nur den Code gepostet

　(2) Code

Code kopieren Der Code lautet wie folgt:

//Erkennen Sie die Änderungsreaktion, wenn Sie das Bild nach oben und unten bewegen
　　$("#sendBox :button.sendBtn").mouseover(function () {
　　 $(this).css("backgroundPosition", "0 -196px");
　　}).mouseout(function () {
​​ $(this).css("backgroundPosition", "-117px -165px");
　　});

3. Die zweite Funktion

　(1) Funktions-Screenshots

　

　(2) Code

Code kopieren Der Code lautet wie folgt:

//Änderungen in der Anzahl der Eingabezeichen realisieren
　　$("#msgTxt").change(function () {
​var world = $("#msgTxt").val();
var length = 140 - world.length;
​if (Länge < 0) {
$("#sendBox span.countTxt").html("Sie haben " Math.abs(length) " Wörter überschritten"); > }else {
​$("#sendBox span.countTxt").html("Sie können auch " Länge "Wörter" eingeben);
}
});
​ setInterval(function () {
​$("#msgTxt").change();
}, 20);

4. Die dritte Funktion

　(1) Funktions-Screenshots

　

　(2)Code

Code kopieren Der Code lautet wie folgt:

//Bestätigen Sie den Text der Ausgabeinformationen (bitte geben Sie die Themeninformationen ein, die rot angezeigt werden sollen)
/*
​​Erweitern Sie eine Methode zum Auswählen von Text für jQuery
*/
$.fn.selectRange = Funktion (Start, Ende) {
        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) {
alarm('aaaaaaaa');
CurObj.selectionStart = start;
CurObj.selectionEnd = end;
          }
};
//Klicken Sie auf Themenausgabe#Bitte geben Sie Themeninformationen ein#
​​​ $("#funBox a.creatNew").click(function () {
If ($.trim($("#msgTxt").val()).length == 0) {
                $("#msgTxt").val("#Bitte geben Sie Themeninformationen ein#").selectRange(1, 8);
         }
});

5. Die vierte Funktion

　(1) Funktions-Screenshots

　

　(2)Code

Code kopieren Der Code lautet wie folgt:

//Erkenne die Anzeige von Freundinformationen, wenn du auf die Schaltfläche „Freund“ klickst
var friendList = ["Dai Zhong", "Xiao Meng", "Ren Shoulong", "Dai Wei", "Maria", "Han Yinglong", "Sheng Jingheng", "Feifei", "Xiao Xian", "Yuanfang" ];
$("#funBox a.atSome").click(function () {
//Die Div-Ebene mit der oben definierten ID ist position:absolution
$("

").appendTo("#funBox");
//Verwenden Sie $.each, um die Array-Werte zu durchlaufen und sie der Ebene hinzuzufügen
If ($("#level").text() == "") {
                   $.each(friendList, function () {
//Durchqueren Sie die Ebene und fügen Sie eine Li-Stil-Transformation hinzu
$("

@" this "

").css("cursor", "pointer").mouseover(function () {
                $(this).css("backgroundColor", "gelb").siblings().css("backgroundColor", "white");
                }).appendTo($("#ul")).click(function () {
//Wenn Sie den Klickstil implementieren, schreiben Sie den Wert in
                $("#msgTxt").val($("#msgTxt").val() $(this).text());
            })
})
};
//So ermitteln Sie, ob ein Benutzer auf eine Schaltfläche geklickt hat
$("#level").mouseleave(function () {
​​​​​ $("#level").remove();
})
//Platzieren Sie den Speicherort des erstellten Moduls
$("#level").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). links "px");
});

6. Die fünfte Funktion

　(1) Funktions-Screenshots

　

　(2)Code

Code kopieren Der Code lautet wie folgt:

//Erkenne die Funktion von QQ-Emoticons
var userFaces = { '0.gif': 'Smile', '1.gif': 'Pout', '2.gif': 'Color', '3.gif': 'Daze', '4.gif': 'Stolz', '5.gif': 'Weinen', '6.gif': 'Schüchtern', '7.gif': 'Halt die Klappe', '8.gif': 'Schlaf', '9.gif' : 'weinen', '10.gif': 'verlegen', '11.gif': 'wütend', '12.gif': 'frech', '13.gif': 'Zähne entblößen', '14.gif ': 'überrascht', '15.gif': 'traurig', '16.gif': 'cool', '17.gif': 'kalter Schweiß', '18.gif': 'verrückt', '19 . gif': 'Erbrechen', '20.gif': 'grinsen', '21.gif': 'süß', '22.gif': 'Augenrollen', '23.gif': 'arrogant', ' 24 .gif': 'hungrig', '25.gif': 'schläfrig', '26.gif': 'ängstlich', '27.gif': 'schwitzen', '28.gif': 'albernes Lachen', ' 29.gif': 'Soldat', '30.gif': 'Kampf', '31.gif': 'Schwören', '32.gif': 'Frage', '33.gif': 'Still', ' 34.gif': 'faint', '35.gif': 'folter', '36.gif': 'degeneration', '37.gif': 'skelett', '38.gif': 'beat', ' 39.gif': 'Auf Wiedersehen', '40.gif': 'Schweiß abwischen', '41.gif': 'Nasenbohren', '42.gif': 'Applaus', '43.gif': 'Peinlichkeit ' Big', '44.gif': 'Smirk', '45.gif': 'Links summend', '46.gif': 'Rechts summend', '47.gif': 'Gähnen', ' 48.gif ': 'Verachtung', '49.gif': 'Beschwerde', '50.gif': 'fast weinen', '51.gif': 'heimtückisch', '52.gif': 'Kuss', '53. gif': 'Scary', '54.gif': 'Schlecht', '55.gif': 'Chopper', '56.gif': 'Watermelon', '57.gif': 'Beer', '58. gif': 'Basketball', '59.gif': 'Ping Pong', '60.gif': 'Kaffee', '61.gif': 'Reis', '62.gif': 'Schweinekopf', ' 63.gif': 'Rose', '64.gif': 'Wither', '65.gif': 'Show love', '66.gif': 'Love', '67.gif': 'Heart Broken' , '68.gif': 'Kuchen', '69.gif': 'Blitz', '70.gif': 'Bomb', '71.gif': 'Messer', '72.gif': 'Fußball' , '73.gif': 'Marienkäfer', '74.gif': 'Poop', '75.gif': 'Mond', '76.gif': 'Sonne', '77.gif': 'Geschenk' , '78.gif': 'Umarmung', '79.gif': 'stark', '80.gif': 'schwach', '81.gif': 'Handschlag', '82.gif': 'Sieg' , '83.gif': 'Faust', '84.gif': 'Verführen', '85.gif': 'Faust', '86.gif': 'Arm', '87.gif': 'Ich liebe dich ', '88.gif': 'NEIN', '89.gif': 'OK', '90.gif': 'Love', '91.gif': 'Blow a kiss', '92.gif': 'springen', '93.gif': 'zittern', '94.gif': 'brennend', '95.gif': 'im Kreis drehen', '96.gif': 'Kotau', '97 ': 'umkehren', '98.gif': 'Springseil', '99.gif': 'winken', '100.gif': 'aufgeregt', '101.gif': 'Straßentanz', ' 102. gif': 'Kuss', '103.gif': 'Linkes Tai Chi', '104.gif': 'Rechtes Tai Chi', '105.gif': 'Ruhe', '106.gif': ' Schwindelig, '107.gif': 'Unzufriedenheit', '108.gif': 'Schlafend', '109.gif': 'Klein frech', '110.gif': 'Fluchen', '111.gif': 'Wütend', '112.gif': 'lachend', '113.gif': 'lächelnd', '114.gif': 'schockiert', '115.gif': '囧' };
$("#funBox a.insertFace").click(function () {
$("

").appendTo("#funBox");
$.each(userFaces, Funktion (Schlüssel, Wert) {
$("").css("cursor", "pointer").appendTo("#Userfaces").click(function () {
          $("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
//Wie oben, wie man ermittelt, ob ein Benutzer auf eine Schaltfläche geklickt hat
$("#Userfaces").mouseleave(function () {
          $("#Userfaces").remove();
});
//Platzierung
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). links "px");
});

Okay, wir haben alle Funktionen, die wir haben sollten. Was die Verschönerung betrifft, können Freunde es selbst tun

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn