Jquery implémente la diffusion en imitant Tencent Weibo_jquery

Préface : Depuis que j'ai acquis quelques connaissances sur Jquery ces jours-ci, j'ai l'impression que Jquery est trop puissant qu'avant. De nombreuses fonctions simples nécessitaient auparavant des dizaines de lignes de code en JavaScript mais n'utilisaient que quelques lignes de code en Jquery. .C'est tout, alors j'ai décidé d'étudier Jquery durement. S'il vous plaît, soutenez-moi, apprendre Jquey ces jours-ci m'a fait sentir qu'il n'est pas difficile d'utiliser Jquery. facilement résolu, apprenez-en plus sur certaines méthodes, événements, etc. J'ai donc implémenté ici un Jquery pour imiter les maigres publications diffusées de Tencent.

1. Créez d'abord une nouvelle page HTML et présentez la fonction que je souhaite réaliser

(1) Créez une nouvelle page HTML comme suit

(2) La première fonction, lorsque la souris glisse sur l'image diffusée, elle se transformera en une autre image avec une couleur plus claire, et elle reviendra à l'état d'origine en la quittant

(3) La deuxième fonction est que lorsque vous saisissez du texte dans la zone de saisie de texte et que vous ne saisissez aucun mot, le nombre de mots indiqué en bas est réduit de 1. S'il dépasse le nombre, l'utilisateur sera demandé combien de mots ont été dépassés

(4) La troisième fonction consiste à cliquer sur le bouton du sujet. Si la zone de texte est vide, #Veuillez saisir les informations sur le sujet # sera saisi, et veuillez saisir les informations sur le sujet à mettre en surbrillance. rien ne sera affiché. Ne pas entrer

(5) La quatrième fonction est que lorsqu'un ami est cliqué, un calque sera généré en dessous pour afficher les amis de l'utilisateur. Lorsque l'utilisateur clique sur un ami, le nom sera affiché dans la zone de texte

.

(6) La cinquième fonction, lorsque l'utilisateur clique sur l'émoticône, les émoticônes couramment utilisées de QQ seront affichées, puis l'utilisateur pourra sélectionner l'émoticône sur laquelle cliquer et l'afficher dans la zone de texte. C'est fondamentalement la même chose. comme quatrième fonction, comme suit Les fonctions sont décrites ci-dessous

2. La première fonction

　(1) Schéma d'affichage des fonctions

Comme il ne s'agit que d'un simple effet de glissement, la capture d'écran ne semble pas évidente, j'ai donc uniquement posté le code

　(2)Code

Copier le code Le code est le suivant :

//Réalisez la réaction de changement en déplaçant l'image de haut en bas
　　$("#sendBox :button.sendBtn").mouseover(function () {
　　 $(this).css("backgroundPosition", "0 -196px");
　　}).mouseout(function () {
​​ $(this).css("backgroundPosition", "-117px -165px");
　　});

3. La deuxième fonction

　(1) Captures d'écran des fonctions

　

　(2)Code

Copier le code Le code est le suivant :

//Réaliser des changements dans le nombre de caractères saisis
　　$("#msgTxt").change(function () {
​var world = $("#msgTxt").val();
var longueur = 140 - monde.longueur;
​si (longueur < 0) {
$("#sendBox span.countTxt").html("Vous avez dépassé " Math.abs(length) " mots"); > }autre {
​$("#sendBox span.countTxt").html("Vous pouvez également saisir " length "words");
>
});
​ setInterval(function () {
​$("#msgTxt").change();
}, 20);

4. La troisième fonction

　(1) Captures d'écran des fonctions

　

　(2)Code

Copier le code Le code est le suivant :

//Confirmez le texte des informations de sortie (veuillez saisir les informations du sujet à afficher en rouge)
/*
​​Étendre une méthode de sélection de texte pour jQuery
*/
$.fn.selectRange = fonction (début, fin) {
        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('caractère', début);
                  range.select();
                         /* IE */
             else if (curObj.selectionStart) {
alert('aaaaaaaa');
CurObj.selectionStart = start;
CurObj.selectionEnd = fin;
          }
};
//Cliquez sur la sortie du sujet#Veuillez saisir les informations sur le sujet#
​​​ $("#funBox a.creatNew").click(function () {
Si ($.trim($("#msgTxt").val()).length == 0) {
                 $("#msgTxt").val("#Veuillez saisir les informations sur le sujet#").selectRange(1, 8);
         }
});

5. La quatrième fonction

　(1) Captures d'écran des fonctions

　

　(2)Code

Copier le code Le code est le suivant :

//Réaliser l'affichage des informations sur l'ami en cliquant sur le bouton ami
var liste d'amis = ["Dai Zhong", "Xiao Meng", "Ren Shoulong", "Dai Wei", "Maria", "Han Yinglong", "Sheng Jingheng", "Feifei", "Xiao Xian", " Yuanfang" ];
$("#funBox a.atSome").click(function () {
//La couche div avec l'identifiant comme niveau défini ci-dessus est position:absolution
$("

").appendTo("#funBox");
//Utilisez $.each pour parcourir les valeurs du tableau et les ajouter au calque
Si ($("#level").text() == "") {
                   $.each(friendList, function () {
//Traverse et ajoute une transformation de style li au calque
$("

@" this "

").css("cursor", "pointer").mouseover(function () {
                $(this).css("backgroundColor", "jaune").siblings().css("backgroundColor", "white");
                }).appendTo($("#ul")).click(function () {
//Lors de l'implémentation du style de clic, écrivez la valeur dans
               $("#msgTxt").val($("#msgTxt").val() $(this).text());
            })
})
};
//Comment déterminer si un utilisateur a cliqué sur un bouton
$("#level").mouseleave(function () {
​​​​​ $("#level").remove();
})
//Placer l'emplacement du module créé
$("#level").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). gauche "px");
});

6. La cinquième fonction

　(1) Captures d'écran des fonctions

　

　(2)Code

Copier le code Le code est le suivant :

//Réalisez la fonction des émoticônes QQ
var userFaces = { '0.gif' : 'sourire', '1.gif' : 'lèvre', '2.gif' : 'couleur', '3.gif' : 'étourdi', '4.gif' : 'Fier', '5.gif' : 'Pleurer', '6.gif' : 'Timide', '7.gif' : 'Tais-toi', '8.gif' : 'Dors', '9.gif' : 'pleurer', '10.gif' : 'gêné', '11.gif' : 'en colère', '12.gif' : 'méchant', '13.gif' : 'montrer les dents', '14. ' : 'surpris', '15.gif' : 'triste', '16.gif' : 'cool', '17.gif' : 'sueurs froides', '18.gif' : 'fou', '19 . gif' : 'vomi', '20.gif' : 'sourire', '21.gif' : 'mignon', '22.gif' : 'rouler les yeux', '23.gif' : 'arrogant', ' 24 .gif' : 'faim', '25.gif' : 'endormi', '26.gif' : 'effrayé', '27.gif' : 'transpiration', '28.gif' : 'rire idiot', ' 29.gif' : 'Soldat', '30.gif' : 'Lutte', '31.gif' : 'Jure', '32.gif' : 'Question', '33.gif' : 'Chut', ' 34.gif' : 'évanouissement', '35.gif' : 'torture', '36.gif' : 'dégénérescence', '37.gif' : 'squelette', '38.gif' : 'battre', ' 39.gif' : 'Au revoir', '40.gif' : 'Essuyez la sueur', '41.gif' : 'Cuchez-vous le nez', '42.gif' : 'Applaudissements', '43.gif' : 'Gêne ' Gros', '44.gif' : 'Sourire narquois', '45.gif' : 'bourdonnement à gauche', '46.gif' : 'bourdonnement à droite', '47.gif' : 'bâillement', ' 48.gif ' : 'mépris', '49.gif' : 'grief', '50.gif' : 'presque en pleurs', '51.gif' : 'insidieux', '52.gif' : 'baiser', '53. gif' : 'Effrayant', '54.gif' : 'Pauvre', '55.gif' : 'Chopper', '56.gif' : 'Pastèque', '57.gif' : 'Bière', '58. gif' : 'Basketball', '59.gif' : 'Ping Pong', '60.gif' : 'Café', '61.gif' : 'Riz', '62.gif' : 'Tête de cochon', ' 63.gif' : 'Rose', '64.gif' : 'Wither', '65.gif' : 'Montrer l'amour', '66.gif' : 'Amour', '67.gif' : 'Cœur brisé' , '68.gif' : 'Gâteau', '69.gif' : 'Foudre', '70.gif' : 'Bombe', '71.gif' : 'Couteau', '72.gif' : 'Football' , '73.gif' : 'Coccinelle', '74.gif' : 'Caca', '75.gif' : 'Lune', '76.gif' : 'Soleil', '77.gif' : 'cadeau' , '78.gif' : 'câlin', '79.gif' : 'fort', '80.gif' : 'faible', '81.gif' : 'poignée de main', '82.gif' : 'Victoire' , '83.gif' : 'Poing', '84.gif' : 'Séduire', '85.gif' : 'Poing', '86.gif' : 'Pauvre', '87.gif' : 'Je t'aime ', '88.gif' : 'NON', '89.gif' : 'OK', '90.gif' : 'Amour', '91.gif' : 'Envoie un baiser', '92.gif' : 'sautant', '93.gif' : 'tremblement', '94.gif' : 'brûlant', '95.gif' : 'tourner en rond', '96.gif' : 's'incliner', '97. ' : 'faire demi-tour', '98.gif' : 'corde à sauter', '99.gif' : 'agitant', '100.gif' : 'excité', '101.gif' : 'street dance', ' 102. gif' : 'Baiser', '103.gif' : 'Taï Chi Gauche', '104.gif' : 'Taï Chi Droit', '105.gif' : 'Calme', '106.gif' : ' Dizzy', '107.gif' : 'insatisfaction', '108.gif' : 'sommeil', '109.gif' : 'coquine', '110.gif' : 'malédiction', '111.gif' : ' en colère' , '112.gif' : 'riant', '113.gif' : 'souriant', '114.gif' : 'choqué', '115.gif' : '囧' };
$("#funBox a.insertFace").click(function () {
$("

").appendTo("#funBox");
$.each(userFaces, fonction (clé, valeur) {
$("").css("cursor", "pointer").appendTo("#Userfaces").click(function () {
         $("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
// Comme ci-dessus, comment déterminer si un utilisateur a cliqué sur un bouton
$("#Userfaces").mouseleave(function () {
          $("#Userfaces").remove();
});
//Placement
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). gauche "px");
});

Très bien, nous avons toutes les fonctions que nous devrions avoir. Quant à l'embellissement, les amis peuvent le faire eux-mêmes

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn