Idea:
1. Obtenga la distancia del objeto desde la parte superior e izquierda;
2. Obtenga el objeto elemento;
3. Obtenga la distancia de desplazamiento de la barra de desplazamiento cuando se desplaza la barra de desplazamiento;
4. La función se ejecuta cuando la barra de desplazamiento se desplaza: la distancia del objeto desde arriba/izquierda se convierte en la distancia original desde arriba/izquierda + el número de píxeles desplazados por la barra de desplazamiento.
código html:
<!DOCTYPE html> <html> <cabeza> <meta juego de caracteres="UTF-8"> <título></título> </cabeza> <cuerpo> <div id="izquierda"> <img src="images/z1.jpg" alt=""/> </div> <div id="derecho"> <img src="images/z2.jpg" alt=""/> </div> </cuerpo> </html>
código css:
*{ margen: 0; relleno: 0; } cuerpo{ ancho: 2000px; altura: 2000 px; } .izquierda{ posición: absoluta; ancho: 110px; altura: 110 píxeles; arriba: 100px; izquierda: 50px; } .bien{ posición: absoluta; ancho: 110px; altura: 110 píxeles; arriba: 100px; izquierda: 1360px; }
código js:
var leftT;//La distancia entre la p izquierda y la superior var leftL;//La distancia entre la p izquierda y la izquierda var rightT;//La distancia entre la p derecha y la var derechaL superior;/ /La distancia entre la p derecha y la izquierda var objLeft;//P objeto de documento a la izquierda var objRight;//P objeto de documento a la derecha function place(){ objLeft=document.getElementById("izquierda"); objRight=document.getElementById("derecho"); leftT=document.defaultView.getComputedStyle(objLeft,null).top; leftL=document.defaultView.getComputedStyle(objLeft,null).left; rightT=document.defaultView.getComputedStyle(objRight,null).top; rightL=document.defaultView.getComputedStyle(objRight,null).left; } //Obtiene el número de píxeles desplazados por la función de la barra de desplazamiento move(){ var scrollT=document.documentElement.scrollTop; var scrollL=document.documentElement.scrollLeft; //Establece los píxeles desde la p izquierda hasta la parte superior objLeft.style.top=parseInt(leftT)+scrollT+"px"; objLeft.style.left=parseInt(leftL)+scrollL+"px"; objRight.style.top=parseInt(rightT)+scrollT+"px"; objRight.style.left=parseInt(rightL)+scrollL+"px"; } ventana.onload=lugar; window.onscroll=move;
Recomendaciones relacionadas: [tutorial en vídeo de JavaScript]
¡Lo anterior es usar js para fijar la imagen en una determinada posición de la pantalla! Para obtener más detalles, preste atención a otros artículos relacionados en el sitio web chino de php.