Declaración: La demostración se basa en una institución de capacitación y está muy agradecido por esta estructura de capacitación. Sin más preámbulos, ahora comenzaremos a cambiar la producción de la demostración.
En primer lugar, en el proceso de aprendizaje front-end, las imágenes de carrusel son algo que debemos aprender, por lo que para implementar de manera más eficiente varias imágenes de carrusel, se encapsula un marco de movimiento.
función getStyle (obj, attr) {if (obj.currentStyle) {return obj.currentStyle [attr]; // para obtener el valor de atributo en IE} else {return window.getComputedStyle (obj, null) [attr]; // en el orden para obtener el valor de atributo bajo el avicultor W3C}} function animate (obj, json) {json) {JSON) { ClearInterval (obj.timer); obj.timer = setInterval (function () {var flag = true; var current = 0; for (var attr en json) {if (attr == 'opacity') {current = parseInt (getStyle (obj, attr)*100);} else {current = parseInt (getStyle (obj, attr);}; var step = (json [json [ATTR] / 10; Math.Ceil (paso): Math.Floor (step); ')'; ClearInterval (obj.timer);Este marco es compatible con diferentes navegadores y permite que las propiedades como la opacidad y el índice Z sean pasados. Por supuesto, las propiedades comunes como el ancho, la altura, la izquierda, la derecha son esenciales. Con este marco, puede lograr excelentes resultados. Así que ahora comenzamos a hacer la demostración formalmente.
Primero, la producción de 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 producción de index.html es muy simple. Insertaremos la imagen como la imagen de fondo de Li en JavaScript. Después de eso, ajustamos el estilo CSS.
*{margen: 0px; relleno: 0px; } #box {width: 1300px; Altura: 400px; Margen: 100px Auto; desbordamiento: oculto; } #box ul {altura: 400px; Ancho: 1300px; } #box ul li {ancho: 240px; Altura: 400px; flotante: izquierda; desbordamiento: oculto; }El código para JavaScript es el siguiente:
window.Onload = function () {var box = document.getElementById ('box'); var ali = box.children [0] .Children; for (var i = 0; i <ali.length; i ++) {ali [i] .style.backgroundImage = 'url (' + 'images/' + (i + 1) +'jpg '; ali [i] .onmouseOver = function () {for (var i = 0; i <ali.length; i ++) {animate (ali [i], {}) Animate (this, {ancho: 800});De esta manera, se realiza la demostración del efecto de fuelle implementado usando JS nativo. Por supuesto, el marco animado encapsulado también se puede utilizar para lograr efectos de carrusel similares a NetEase.
El artículo anterior es una demostración de estilo fuelle que implementa un marco deportivo (código de ejemplo) y encapsula un marco deportivo (código de ejemplo) que es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.