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
3. La deuxième fonction
(1) Captures d'écran des fonctions
(2)Code
(1) Captures d'écran des fonctions
(2)Code
5. La quatrième fonction
(1) Captures d'écran des fonctions
(2)Code
6. La cinquième fonction
(1) Captures d'écran des fonctions
(2)Code
Très bien, nous avons toutes les fonctions que nous devrions avoir. Quant à l'embellissement, les amis peuvent le faire eux-mêmes