Aujourd'hui, j'ai codé deux autres effets spéciaux: l'un est fabriqué avec l'entrée native [Type = Range], et l'autre est complètement personnalisé; Ce qui suit est le code complet et la démonstration:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tapie> </ title> <style> #tip {position: absolue; En haut: 30px; à gauche: 0; à droite: 0; Largeur: 200px; hauteur: 160px; marge: auto; Border: 1px gris massif; Color en arrière-plan: Cornsilk; } #tip div {position: relative; Largeur: 100%; hauteur: 80px; Border-Bottom: 1px gris massif; } .out {position: relative; Gauche: 16%; Affichage: bloc en ligne; Border: 2px solide RoyalBlue; marge: 20px; Largeur: 130px; hauteur: 20px; Color d'arrière-plan: LightGoldenRodyellow; } .in {affichage: bloc; hauteur: 20px; hauteur de ligne: 20px; Texte-aligne: à droite; Couleur: blanc; Largeur: 50%; Image d'arrière-plan: gradient linéaire (à droite, PowderBlue 0%, # 336699 50%, rouge 0px 1px RGBA (0, 0, 0, 0, 0, 0, encrét 0, 0, 0, encadré, 0px 1px rgba (0, 0, 0, 0, 0, encart, 0px 1px rgba (0, 0, 0, 0, 0.6) encadré; background-color: LightskyBlue; Border-Radius: 15px; Width: 60%; -webkit-apparition: non; -Moz-apparenance: nul; Entrée [Type de gamme "] :: Black Inset LightskyBlue;} .B {Affichage: Bloc en ligne; Document.getElementById (inner1 '); Inner.style.width = range.Value + '%';}; id, id1; Inner2.Style.width = (valeur) * a + 'px'; Function () {Console.log (A: '+ A +', '+' Value: '+ Valeur); if (Value <100) {Value ++; cleartimeout (id1); id = "inner1"> 50 </span> </ span> <entrée id = "range" type = "range" min = "0" max = "100" step = "1" value = "50"> </ div> <div id = "d2"> <input id = "btn1" type = "Button" value = "<"> <spander = "exter2"> <pan Span id = "btn2" type = "bouton" value = ">"> </div> Appuyez et maintenez le bouton pendant 0,5 seconde, et il continuera de changer!La première implémentation est très simple, donc je ne l'expliquerai pas, je lis le code par moi-même;
Ici, nous introduisons principalement la mise en œuvre du deuxième exemple:
Lorsque nous voyons une exigence ou des effets spéciaux des autres, ne vous précipitez pas pour voir le code des autres. Pensez-y d'abord, comment devriez-vous y parvenir? Mettez vos idées en premier
Le principe de mise en œuvre de cet effet spécial:
1. Nilitant une durée dans une période;
• Entrée extérieure: seule largeur d'affichage, hauteur, bordure, pas d'arrière-plan
• Span à l'intérieur: la hauteur est la même que l'extérieur, la largeur est de 50% par défaut. Définissez d'abord la couleur d'arrière-plan sur le dégradé linéaire
2. L'événement OnClick du bouton est relativement simple. Cliquez dessus pour modifier la largeur de la portée à l'intérieur et afficher le numéro.
3. Lorsque le bouton est OnMoudown, démarrez la minuterie et exécutez la fonction de changement de fonction après 500 ms. La fonction de changement est une fonction qui se rappelle avec setTimeout. Il rappellera une fois sans 16,7 ms pour réaliser l'effet d'animation.
Analyse de difficulté:
1. Cette phrase var a = parsefloat (window.getCompuledStyle (outer2, null) .Width) / 100;
Utilisé pour obtenir la valeur initiale si vous utilisez OUTER2.STYLE.Width
Cela n'en vaut pas la peine, bien sûr, vous pouvez également définir une valeur fixe, par exemple, ici peut être définie comme
var a = 1,3,
Notez que la méthode GetCompuledStyle n'est pas prise en charge sous IE9.
L'objet élément de IE a la propriété CurrentStyle;
2. Cette phrase
btn1.onmouseup = function () {cleartimeout (id1);
cleartimeout (id)};
C'est très important. Sans cela, OnMosedown sera déclenché avant que ONCLICK ne soit déclenché. Après 500 ms, il commencera à s'exécuter, puis le temporisateur extérieur sera exécuté;
3. Rien d'autre n'est difficile;
Cet exemple s'étend en fait à de nombreuses autres applications, telles que le remplacement de l'affichage du milieu par des articles, des images, etc., puis en remplaçant le bouton par des bouton, l'effet sera cool!
Si vous pensez que j'ai quelque chose de mauvais dans l'écriture, veuillez le signaler!
L'exemple simple ci-dessus du combat pratique JavaScript (gamme native et effets spéciaux personnalisés) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.