¿Qué debo hacer si el mouse se hace más grande al decorar imágenes de bebés en la página de inicio de Taobao?
Generalmente se utiliza para hacer zoom para ver imágenes de productos. Hay efectos similares disponibles en JD.COM Mall, Kefan y Alibaba.
La ventaja es que puedes ampliar parcialmente y ver la imagen cerca de la imagen original, y puedes usar el mouse para controlar la posición de visualización.
Principios básicos
En primer lugar, debe haber un elemento img como objeto original y un contenedor como cuadro de visualización.
Coloque otro elemento img en el cuadro de visualización como objeto de imagen grande y establezca el tamaño según la proporción.
Cuando el mouse se mueve sobre la imagen original, la parte correspondiente se muestra a través del posicionamiento absoluto de la imagen grande, logrando un efecto de lupa.
Carga de imágenes
Cuando se inicializa el programa, primero se ejecutará el programa _initLoad, que se utiliza principalmente para cargar imágenes.
Debido a que el tamaño obtenido por img antes de cargar es inexacto, el cálculo de los parámetros relevantes debe esperar hasta que se cargue la imagen.
Hay dos formas de acercar: usar la imagen original para acercar y usar la nueva imagen después de acercar.
La ventaja de ampliar la imagen original es que solo necesitas cargar una imagen y puedes obtener un efecto más claro usando una nueva imagen.
Según diferentes métodos, se seleccionará el cargador original correspondiente:
useOrigin =! este. _ zoomPic amp amp esto. _scale,
loadImage = $$F.bind( useOrigin? this. _loadOriginImage: this. _loadImage, this
Cuando la imagen grande no está configurada pero hay una ampliación, Automáticamente utilizará la imagen original para ampliar el cargador.
Echemos un vistazo al proceso de ampliación y carga de la imagen original:
1. Cargue la imagen original:
if(origin pic amp; amporiginPic. != imagen.src ) {
image.onload = loadImage
image.src = originPic
} else if ( image.src ) {
if (!image.complete ) {
image.onload = loadImage
} else {
loadImage();
}
} En caso contrario {
Return;
}
El atributo _originPic registra la dirección de la imagen original. Si la imagen original está configurada y es diferente de la imagen cargada actualmente del elemento, entonces se configura onload y se carga la imagen original.
De lo contrario, si el elemento tiene actualmente una imagen cargada, primero use complete para determinar si la carga está completa y configure onload para que no se detenga. Si se completa, ejecute el cargador directamente.
Finalmente, si no hay ninguna imagen original, sal del programa.
2. Ejecute el cargador _loadOriginImage:
Esto. _ image.onload = null
Esto. _zoom.src = esto. _image.src
Esto. _ init cargado();
Debido a que hay un error en la carga de imágenes gif en IE6/7, la carga se restablecerá primero.
Luego ejecute _initLoaded para inicializar el programa de configuración de carga.
Usar imágenes nuevas es un poco complicado:
1. Carga la imagen original, como se muestra arriba.
2. Precargar imagen grande:
var preload = this.
_precarga, zoomPic = esto. _zoomPic || imagen.src,
loadPreload = $$F.bind(this._loadPreload,this);
if (zoomPic!= preload.src) {
preload.onload = loadPreload
preload.src = zoomPic
}else {
if (!preload.complete ) {
preload.onload = loadPreload
}else {
this. _ load preload();
}
}
_preload es un objeto de precarga que utiliza el precargador _loadPreload.
El objeto preinstalado se utiliza principalmente para obtener el tamaño original de la imagen grande y también es la base para la habilidad de reemplazar la imagen original más adelante.
Si no hay una imagen grande, significa que no hay una imagen grande en este momento y no hay ampliación, por lo que se utiliza la imagen original para hacer la imagen grande.
El método de carga es similar a la imagen original.
3. Después de cargar la imagen original, ejecute _loadImage cargador de imágenes originales:
Copiar código
If (this._loaded) {
Esto. _ init cargado();
}else {
Esto. _ cargado = verdadero
if (this._scale) {
this. _substitute = true
Esto. _zoom.src = esto. _image.src
Esto. _ init cargado();
}
}
Copiar código
Si _loaded es verdadero, significa que la imagen grande tiene cargado, ejecute directamente el programa _initLoaded.
De lo contrario, establezca _loaded en verdadero para marcar que se ha cargado la imagen original. Si hay una escala personalizada en este momento, primero reemplace la imagen grande con la imagen original.
Debido a que las imágenes grandes generalmente se cargan lentamente, puede operar inmediatamente reemplazando primero la imagen original. Establezca el atributo _substitute en el indicador verdadero para usar la sustitución.
4. Después de completar la precarga de imágenes grandes, ejecute el programa de precarga de imágenes grandes _loadPreload:
Esto. _zoom.src = esto. _ preload.src
if (this._loaded) {
if (!this._substitute) {this. _ init cargado();}
}else {
Esto. _ cargado = true
}
Si _loaded es verdadero, significa que la imagen original ha sido cargada. Si _substitute es falso, es decir, la imagen original no ha sido reemplazada. Se ejecuta el programa _initLoaded.
Si la imagen original no está completamente cargada, establezca _loaded en verdadero para marcar que se ha cargado la imagen grande.
Otra pregunta sobre la carga de imágenes, prueba el siguiente código:
Copiar código
ltscriptgt
var img = nueva imagen
Prueba de función(){
img . onload = función(){ alerta(" carga ")}
img.src = ".
hk/images/nav_logo8.png "
}
Prueba()
Establecer tiempo de espera (prueba, 3000)
lt/script gt;
Copiar código
En Chrome/safari, "Cargando" solo aparecerá una vez, y todo lo demás aparecerá dos veces. Puede deberse a optimización o algo así. /p>
Una vez completada la carga, se pueden configurar los objetos y parámetros relevantes, todos los cuales se realizan en el programa _initLoaded
Configuración de carga
El programa de configuración de carga inicial. en _initLoaded es principalmente para activar. Prepárese para el efecto de ampliación
Paso 1, ejecute el programa _initSize para inicializar el tamaño de visualización
Primero, corrija la relación de ampliación:
If (!scale) { escala. =this._preload.width/image.width;}
this._scale = escala = math.min(math.max(this._min,scale ),this._max);
p>Si la escala no está configurada, el tamaño predeterminado obtenido del objeto precargado se utilizará como tamaño gráfico grande
Una "medida de seguridad " se toma al cargar la imagen para garantizar que esté bien aquí. Obtenga la ampliación.
También puede limitar el tamaño de la escala personalizando las propiedades máxima y mínima.
Luego puede establezca el tamaño de la imagen grande proporcionalmente:
zoom width = math ceil(image . width * scale);
zoom height = math . escala);
Paso 2, ejecute _initViewer para inicializar el programa del cuadro de visualización y configurar el cuadro de visualización
Primero configure el estilo:
var estilos = {. relleno: 0, desbordamiento: "oculto" }, p = $$ D.getStyle(visor, "posición");
if (p!= "relativo" amp ampp!= "absoluto") { estilos . posición = "relativa";};
$$D.setStyle(visor, estilo);
posición de zoom = "absoluta";
Luego inserte la imagen para mostrar en el cuadro de visualización:
If(! $$D.contains(viewer, zoom)){viewer . appendchild(zoom);}
El tercer paso es ejecutar el programa de datos de inicialización _initData, que establece principalmente algunos parámetros utilizados al hacer zoom.
Incluye las coordenadas originales utilizadas para la determinación de la posición:
Esta. _rect = $$d.rect(image);
Parámetros de corrección para la corrección izquierda/superior:
Esto. _ reparación izquierda = imagen . cliente izquierda parse int($ $ d . get style(imagen, "padding-left"));
Esto.
_ repara top = image . client top parse int($ $ d . get style(image, "padding-top));
También hay parámetros de rango y tamaño de visualización.
range El parámetro es el tamaño del rango que se mostrará en la imagen original, y el tamaño de visualización es el tamaño de visualización del marco de visualización.
Si los parámetros de rango se personalizan mediante rangeWidth y rangeHeight, el tamaño de visualización. se puede calcular combinando la relación de ampliación:
p>
ancho del rango = math .ceil(ancho del rango);
alto del rango = math .ceil(altura del rango);
Esto. _ ancho del visor = math .ceil (ancho del rango * escala);
This. _ ancho del visor = math . >
$$D.setStyle(viewer, {
Ancho: this. _viewerWidth "px",
Alto: this. _viewerHeight "px"
});
Copiar código
Si no se establece, se utilizará el tamaño de visualización predeterminado del cuadro de visualización:
Copiar código
var estilo;
if (!viewer.clientWidth) {
var estilo = espectador.estilo
estilo = {
Visualización: estilo.display,
Posición: estilo.posición,
Visibilidad: Estilo.Visibilidad
};
$$D .setStyle(visor, {
Pantalla: "bloque", posición: "absoluta", visibilidad: "oculta"
});
}
este. ancho del cliente;
Esto. _ altura del visor = altura del visor;
if (estilos) { $$D.setStyle(visor, estilo) ; }
rangoAncho = Math.ceil( this. _ ancho/escala del visor);
rangeHeight = Math.ceil( this._ visor height/scale);
Copiar código
Tenga en cuenta que el rango de visualización se obtiene a través de clientWidth/clientHeight.
Si el cuadro de visualización está oculto y se muestra como ninguno, clientWidth/clientHeight no se puede obtener directamente.
En este caso, el programa utiliza los siguientes métodos para obtener:
1, registrar el valor original de visualización/posición/visibilidad
2, establecer; respectivamente Es "bloque"/"absoluto"/"oculto" y puede ocultarse u ocuparse
3. Restablecer el valor original y restaurar el original; estado.
Después de obtener el rango de visualización, haga coincidir la proporción para obtener los parámetros del rango.
Ps: este es un método común para obtener los parámetros de tamaño de elementos no ocupados. El CSS de jquery también usa este método para obtener el ancho/alto.
Después del cálculo proporcional, es posible que obtenga un decimal, pero el tamaño solo puede ser un número entero y el programa siempre usa Math.ceil para redondear.
Efecto de amplificación
Después de configurar todo, puedes ejecutar Iniciar configuración de activadores.
El programa ejecutará automáticamente el método de inicio, principalmente vinculando el programa _start al mouseover/mousemove del objeto de imagen original:
var image = this. _imagen, INICIO = esto. _ INICIO
$$E.addEvent(imagen, " mouseover ", INICIO);
$$E.addEvent( imagen, " mousemove ", INICIO);
Corresponde a moverse dentro y sobre el objeto original.
Ps: si usa adjuntarEvent, también debe prestar atención al problema de la vinculación repetida de la misma función. El addEvent aquí no tiene este problema.
El programa _start vinculado se utiliza principalmente para desvincular y vincular algunos eventos:
Contraseña
Para finalizar el efecto de ampliación al salir de la ventana, el programa _OUT Enlazar al mouse fuera del documento:
Este. _OUT = $$F.bindAsEventListener(function(e){
if (!e. relatedTarget) this._ END();
}, this);
Cuando el mouse sale del documento, se activa el mouseout. Si el relatedTarget actual está vacío, la ejecución de _end se retrasará para finalizar el programa:
var oThis = this, END = function(){ oThis. _ end();};
Esto. _END = function(){ oEsto. _timer = setTimeout(END, othis. delay);};
En el programa _end, primero se ejecutará el método stop para eliminar todos los eventos vinculantes posibles, y luego se ejecutará el método start para continuar esperando para el gatillo.
El programa de movimiento _move vinculado a mousemove se utiliza principalmente para hacer zoom dondequiera que se mueva el mouse.
Para adaptarse a más situaciones (como otros modos extendidos), está vinculado al documento, pero por lo tanto el evento de mouseout no se puede utilizar para activar el procedimiento de eliminación.
El programa compara las coordenadas del mouse y la imagen original para determinar si el mouse se ha movido fuera del rango de objetos de la imagen original:
var x = e.pageX, y = e.pageY, rect = esto. _ rect
if(x lt; rect.left | | x gtrect.right | | y ltrect.top | | y gtrect.bottom ) {
Esto. _ END();
} En caso contrario {
...
}
Si el mouse se mueve fuera del objeto de imagen original , ejecute _END Finalice el efecto de ampliación.
Si se mueve el ratón sobre el objeto original, se calcularán las coordenadas para el posicionamiento.
Primero corrija las coordenadas y convierta las coordenadas del mouse en las coordenadas de posicionamiento de la imagen grande:
pos izquierda = ancho del espectador/2-(x-rect . left-this.
_ reparación izquierda)* escala;
pos .top = altura del espectador/2-(y-rect . top-this . _repairTop ) * escala
Establezca el límite de rango nuevamente:
x = math . ceil(math . min(math . max(pos . left,viewerWidth - zoom.width),0));
y = math . . min(math. max(pos. top, visorHeight - zoom. height), 0));
Finalmente, establezca la posición para que el cuadro de visualización muestre la parte que se va a ampliar.
Ps: Intenté usar scrollLeft/scrollTop para posicionar, pero descubrí que se movía como un diente de sierra en IE, y cuanto más grande se volvía, más obvio era, así que me di por vencido.
Desplazamiento y zoom del mouse
Si la propiedad del mouse se establece en verdadero, las funciones de desplazamiento y zoom del mouse se activarán.
Durante el efecto de acercamiento, puede acercar girando la rueda del mouse.
De hecho, la ampliación se modifica según los cambios en los parámetros dinámicos del rodillo.
Acerca de los eventos de desplazamiento del mouse, el control deslizante también lo mencionó, pero en ese momento solo analizó la diferencia entre ie y ff. Analicémoslo de nuevo.
Primero, es decir, usa la rueda del mouse para vincular el evento y usa el wheelDelta del evento para obtener los parámetros de desplazamiento.
Otros navegadores utilizan el siguiente código para realizar pruebas:
Contraseña
Desplácese hacia abajo y obtendrá los siguientes resultados:
ff: DOMMouseScroll :3_undefinido
Opera: Rueda del mouse: 3_-120
chrome/safari: Rueda del mouse: 0_-120
Puedes ver el enlace del evento, ff Solo admite DOMMouseScroll, otros solo admiten la rueda del mouse.
En cuanto a la obtención de parámetros de desplazamiento, ff solo admite detalles y ópera, y chrome/safari admite wheelDelta.
Ps: No entiendo por qué los detalles de chrome/safari son 0, hay otros usos.
Otra diferencia entre DOMMouseScroll y mousewheel es que el primero no puede vincular elementos directamente, mientras que el segundo sí.
En otras palabras, puedes usar elem.onmousewheel, pero no elem.onDOMMouseScroll.
Según el análisis anterior, en el programa _start, el programa _mouse está vinculado al evento de desplazamiento del documento de la siguiente manera:
Este mouse amp amp$$E.addEvent( documento, $$ B.firefox? "dommousscroll": "rueda del mouse", esto.
En el programa _mouse, obtenga una nueva relación de zoom basada en el parámetro de desplazamiento y el definido por el usuario); relación de zoom:
p>Esto. _scale = ( e. wheelDelta? e . wheel delta/(-120): (e . detalle | | 0)/3)* this .
Al modificar la escala, los parámetros del programa también necesitan. para ser recalculado.
Dado que _rangeWidth/_rangeHeight afecta el proceso de cálculo, es necesario volver a los valores predeterminados definidos por el usuario:
var opt = this.options
This . _ ancho del rango = opt . ancho del rango;
Esto. _ range height = opt . range height;
Luego ejecute _initSize y _initData para restablecer el tamaño y los parámetros, y luego ejecute _move reubicación.
Finalmente, recuerde usar preventDefault para evitar que se active el desplazamiento de la página.