Déclaration: La démo repose sur une institution de formation et est très reconnaissante pour cette structure de formation. Sans plus tarder, nous allons maintenant commencer à changer la production de la démo.
Tout d'abord, dans le processus d'apprentissage frontal, les images de carrousel sont quelque chose que nous devons apprendre, donc pour implémenter plus efficacement diverses images de carrousel, un cadre de mouvement est encapsulé.
fonction getStyle (obj, att) {if (obj.currentStyle) {return obj.currentStyle [att]; // afin d'obtenir la valeur d'attribut sous ie} else {return window.getcomputedStyle (obj, null) [att]; // afin d'obtenir la valeur d'attribut sous W3C. ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var current = 0; for (var atr in json) {if (att == 'opacity') {current = parseInt (getStyle (obj, att) * 100);} else # current = parseInt (getStyle (obj, att);}; var Step = (json [att] - actuel) / 10; Math.Ceil (Step): Math.Floor (Step); Step) + ')';} // jugez si l'attribut est z-index} else if (att == 'zindex') {obj.style.zindex = json [att]; ClearInterval (obj.timer);}}, 5);}Ce cadre est compatible avec différents navigateurs et permet de passer des propriétés telles que l'opacité et le z-index. Bien sûr, des propriétés communes comme la largeur, la hauteur, la gauche, la droite sont essentielles. Avec ce cadre, vous pouvez obtenir d'excellents résultats. Alors maintenant, nous commençons à faire la démo formellement.
Tout d'abord, la production d'index.html.
<div id = "box"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div>
La production d'index.html est très simple. Nous insérerons l'image comme l'image d'arrière-plan de Li dans JavaScript. Après cela, nous ajustons le style CSS.
* {margin: 0px; rembourrage: 0px; } #box {width: 1300px; hauteur: 400px; marge: 100px auto; débordement: caché; } #box ul {hauteur: 400px; Largeur: 1300px; } #box ul li {width: 240px; hauteur: 400px; flottant: à gauche; débordement: caché; }Le code pour JavaScript est le suivant:
window.onload = function () {var box = document.getElementById ('box'); var ali = box.children [0] .children; pour (var i = 0; i <ali.length; i ++) {ali [i] .style.backgroundMage = 'url (' + 'images /' + (i + 1) + '.jpg'; ali [i] .onMouseOver = function () {for (var i = 0; i <ali.length; i ++) {animate (Ali [i], {}); animate (this, {width: 800});}; Ali [i] .onMouseout = function () {pour (var i = 0; i <ali.length; i ++) {animate (Ali [i], {width: 240});De cette façon, la démo de l'effet de souffle implémenté à l'aide de JS native est réalisée. Bien sûr, le cadre animé encapsulé peut également être utilisé pour obtenir des effets de carrousel similaires à NetEase.
L'article ci-dessus est une démo de style souffle qui implémente un cadre sportif (exemple de code) et résume un cadre sportif (exemple de code) qui 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.