* API web Desplazamiento de desplazamiento de 5 elementos · Cliente de área visual de elemento · Desplazamiento de desplazamiento de elemento · Paquete de funciones de animación

** 1.1. ** Serie de compensación de compensación de elementos

1.1.1 Descripción general de la compensación

offset se traduce en offset Podemos obtener dinámicamente la posición (offset), tamaño, etc. del elemento usando los atributos relevantes de la serie de offset.

1. Obtenga la distancia del elemento con la posición del elemento principal posicionado

2. Obtenga el tamaño del elemento en sí (ancho y alto)

3. Nota: El valor devuelto no tiene unidad.
   
   

1.1.2 La diferencia entre offset y estilo

compensar

• offset puede obtener el valor de estilo en cualquier hoja de estilo

• El valor obtenido por la serie offset no tiene unidad

• offsetWidth 包含 relleno + borde + ancho

• Los atributos como offsetWidth son atributos de solo lectura, que solo se pueden obtener y no se pueden asignar.

• Por lo tanto, queremos obtener el tamaño y la posición del elemento, es más apropiado usar offset

estilo

• el estilo solo puede obtener el valor de estilo en la hoja de estilo en línea

• style.width obtiene una cadena con unidades

• style.width obtiene el valor sin relleno ni borde

• style.width es un atributo que se puede leer y escribir, que se puede obtener o asignar

• Entonces, si queremos cambiar el valor del elemento, necesitamos cambiarlo con estilo

Debido a que generalmente registramos eventos táctiles para elementos, debemos recordar targetTocuhes

1.1.3 Caso: Obtener las coordenadas del mouse en el cuadro

1. Hacemos clic dentro del cuadro y queremos obtener la distancia entre el mouse y la izquierda y la derecha del cuadro.
2. Primero obtenga las coordenadas del mouse en la página (por ejemplo, página X, página Y)
3. En segundo lugar, obtenga la distancia del cuadro en la página (box.offsetLeft, box.offsetTop)
4. Reste la distancia del cuadro en la página de las coordenadas del mouse de la página para obtener las coordenadas del mouse en el cuadro
5. Si desea mover el mouse, obtenga las últimas coordenadas y use el mouse para mover

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
    
    
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐标是' + x + ' y坐标是' + y;
})

1.1.4 Caso: Arrastrar y soltar el cuadro modal

El cuadro emergente también se denomina cuadro modal.

1. Haga clic en la capa emergente, aparecerá un cuadro modal y se mostrará una capa de oclusión gris translúcida.

2. Haga clic en el botón Cerrar para cerrar el marco modal y cerrar la capa de oclusión gris translúcida al mismo tiempo.

3. Coloque el mouse en la fila superior del cuadro modal, puede mantener presionado el mouse y arrastrar el cuadro modal para moverse en la página.

4. Suelte el mouse, puede dejar de arrastrar el cuadro modal para mover

1.1.5. Estudio de caso:

1. Haga clic en la capa emergente, el cuadro modal y la capa de oclusión se mostrarán mostrar: bloque;
2. Haga clic en el botón de cierre, el cuadro modal y la capa de oclusión se ocultarán.
3. El principio de arrastrar en la página: el mouse se presiona y se mueve, y luego se suelta el mouse
4. El evento desencadenante es que el mouse presiona mousedown, el mouse mueve mousemove y el mouse suelta mouseup
5. Proceso de arrastre: durante el movimiento del mouse, se obtiene el último valor y se asigna a los valores izquierdo y superior del cuadro modal, de modo que el cuadro modal puede seguir al mouse lejos
6. La fuente del evento desencadenado por la presión del mouse es la línea superior, es decir, la identificación es el título
7. Las coordenadas del mouse menos las coordenadas del mouse en el cuadro son la posición real del cuadro modal.
8. Cuando se presiona el mouse, queremos obtener las coordenadas del mouse en el cuadro.
9. Cuando el mouse se mueve, deje que las coordenadas del cuadro modal se establezcan como: coordenadas del mouse menos las coordenadas del cuadro Tenga en cuenta que el evento de movimiento está escrito en el evento de prensa.
10. Cuando se suelta el mouse, el arrastre se detiene, es decir, el evento de movimiento del mouse se puede cancelar

 // 1. 获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 点击弹出层这个链接 link  让mask 和login 显示出来
        link.addEventListener('click', function() {
    
    
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 点击 closeBtn 就隐藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
    
    
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 开始拖拽
            // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
    
    
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
    
    
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function() {
    
    
                document.removeEventListener('mousemove', move);
            })
        })

1.1.6 Caso: Imitación de la lupa JD

1. Todo el caso se puede dividir en tres módulos funcionales.
2. Pase el mouse sobre el cuadro de imagen pequeño, se muestran la capa de oclusión amarilla y el cuadro de imagen grande, deje la función de ocultar 2 cuadros
3. La capa de oclusión amarilla sigue la función del mouse.
4. Mueva la capa de oclusión amarilla, la imagen grande sigue la función de movimiento.

1.1.7. Estudio de caso:

1. La capa de oclusión amarilla sigue la función del mouse.
2. No es apropiado dar las coordenadas del mouse a la capa de oclusión. Porque las coordenadas de la capa de oclusión están sujetas al cuadro principal.
3. La primera es poner las coordenadas del mouse en el cuadro.
4. Luego, los valores se dan a la capa de oclusión como los valores superior e izquierdo.
5. El evento de movimiento del mouse se usa en este momento, pero todavía se está moviendo en el cuadro de imagen pequeño.
6. Se descubrió que la posición de la capa protectora era incorrecta y hubo que restar la mitad de la altura y el ancho de la caja.
7. La capa de oclusión no puede exceder el alcance del cuadro de imagen pequeño.
8. Si es menor que cero, establezca las coordenadas en 0
9. Si es mayor que la distancia máxima de movimiento de la capa de oclusión, establezca las coordenadas en la distancia máxima de movimiento
10. La distancia máxima de movimiento de la capa de oclusión: el ancho del cuadro de imagen pequeño menos el ancho del cuadro de la capa de oclusión

window.addEventListener('load', function() {
    
    
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function() {
    
    
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function() {
    
    
            mask.style.display = 'none';
            big.style.display = 'none';
        })
        // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
    
    
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
    
    
            maskX = 0;
        } else if (maskX >= maskMax) {
    
    
            maskX = maskMax;
        }
        if (maskY <= 0) {
    
    
            maskY = 0;
        } else if (maskY >= maskMax) {
    
    
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})

1.2. Área visual de la serie cliente del elemento

1.2.1 descripción general del cliente

El cliente se traduce como el cliente, utilizamos los atributos relevantes de la serie de clientes para obtener la información relevante del área visual del elemento.
El tamaño del marco y el tamaño del elemento del elemento se pueden obtener dinámicamente a través de los atributos relevantes de la serie del cliente .

1.2.2. Análisis del código fuente de Taobao flexible.js

Ejecutar la función inmediatamente (función () ()) () o (función () () ())

Rol principal: crear un ámbito independiente. Evite los conflictos de nombres

Las siguientes tres situaciones activarán el evento de carga cuando se actualice la página.

1. Hipervínculo de una etiqueta

2. F5 o botón de actualización (actualización forzada)

3. Botones de avance y retroceso

Pero en Firefox, hay una característica, hay un "caché de ida y vuelta", este caché no solo guarda los datos de la página, sino que también guarda el estado del DOM y JavaScript; de hecho, toda la página se almacena en la memoria.

Por lo tanto, el botón Atrás no puede actualizar la página en este momento.

En este momento, puede utilizar el evento Pageshow para activar. , Este evento se activa cuando se muestra la página, independientemente de si la página proviene de la caché. En la recarga de la página, la presentación de páginas se activará después de que se desencadene el evento de carga; de acuerdo con el objeto de evento persistente para determinar si es el evento de presentación de páginas desencadenado por la página en el caché

注意这个事件给window添加。

1.3. Serie de desplazamiento de elementos de desplazamiento

1.3.1. Desplazamiento general

La traducción de desplazamiento significa desplazamiento. Podemos obtener dinámicamente el tamaño y la distancia de desplazamiento del elemento utilizando los atributos relacionados de la serie de desplazamiento.

1.3.2. El encabezado de la página que se desplaza

Si el alto (o ancho) del navegador no es lo suficientemente alto para mostrar toda la página, aparecerá automáticamente una barra de desplazamiento. Cuando la barra de desplazamiento se desplaza hacia abajo, la altura sobre la página está oculta, lo llamamos el encabezado desplazado de la página. El evento onscroll se activa cuando la barra de desplazamiento se desplaza.

1.3.3. Caso: Imitación Taobao corrige la barra lateral derecha

1. La barra lateral original está absolutamente posicionada
2. Cuando la página se desplaza a una determinada posición, la barra lateral cambia a una posición fija
3. La página continúa desplazándose y volverá a aparecer en la parte superior.

1.3.4. Estudio de caso:

1. Necesita utilizar el desplazamiento de eventos de desplazamiento de página porque es un desplazamiento de página, por lo que el origen del evento es el documento.
2. Desplazarse a una determinada posición es juzgar el valor superior de la página que se desplaza.
3. El encabezado de la página que se está desplazando: puede obtener la ventana izquierda.pageXOffset si se desplaza a través de window.pageYOffset
4. Tenga en cuenta que el encabezado donde se desplaza el elemento es element.scrollTop, si es el encabezado donde se desplaza la página, es window.pageYOffset
5. De hecho, este valor se puede obtener mediante el offsetTop de la caja, si es mayor o igual a este valor, la caja se puede colocar de forma fija.

  //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
    
    
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
    
    
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
    
    
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
    
    
                goBack.style.display = 'block';
            } else {
    
    
                goBack.style.display = 'none';
            }

        })

1.3.5. Solución de compatibilidad de encabezados cuando se desplaza la página

Cabe señalar que el encabezado desplazado de la página tiene problemas de compatibilidad. Por lo tanto, el encabezado desplazado suele tener los siguientes métodos de escritura:

1. DTD declarado, use document.documentElement.scrollTop
2. Sin DTD declarado, use document.body.scrollTop
3. Nuevos métodos window.pageYOffset y window.pageXOffset, IE9 comenzó a admitir

function getScroll() {
    
    
    return {
    
    
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left

1.4. Resumen de las tres series principales

Su uso principal:

1.La serie de desplazamiento se utiliza a menudo para obtener el desplazamiento de la posición del elemento Desplazamiento izquierdo Arriba

2.client se usa a menudo para obtener el tamaño del elemento clientWidth clientHeight

3.El desplazamiento se utiliza a menudo para obtener el desplazamiento de la distancia de desplazamiento.

4. Tenga en cuenta que la distancia de desplazamiento de la página se obtiene a través de window.pageXOffset

1.5. La diferencia entre mouseenter y mouseover

• El evento mouseenter se activa cuando el mouse se mueve sobre el elemento
• Similar al mouseover, la diferencia entre ellos es
• El mouseover se activará cuando el mouse pase a través de su propia caja y cuando pase a través de una caja secundaria. mouseenter solo se activará mediante su propia caja
• La razón de esto es que mouseenter no burbujea
• Use mouseenter con mouse para dejar mouseleave, lo mismo no burbujeará

1.6. Paquete de funciones de animación

1.6.1. Principio de realización de la animación

Principio básico: sigue moviendo la posición de la caja a través del temporizador setInterval ().

Pasos de implementación:

1. Obtener la posición actual de la caja
2. Deje que la caja agregue 1 distancia de movimiento a la posición actual
3. Usa el temporizador para seguir repitiendo esta operación
4. Agrega una condición para finalizar el temporizador
5. Tenga en cuenta que este elemento debe agregar posicionamiento antes de que se pueda usar element.style.left

1.6.2. La función de animación registra diferentes temporizadores para diferentes elementos.

Si varios elementos utilizan esta función de animación, declare el temporizador con var cada vez. Podemos usar diferentes temporizadores para diferentes elementos (use nuestros propios temporizadores exclusivamente).

Principio básico: el uso de JS es un lenguaje dinámico que puede agregar atributos fácilmente al objeto actual.

 function animate(obj, target) {
    
    
            // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
            // 解决方案就是 让我们元素只有一个定时器执行
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
    
    
                if (obj.offsetLeft >= target) {
    
    
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }