Idee:
1. Ermitteln Sie den Abstand des Objekts von der oberen und linken Seite.
2. Holen Sie sich das Elementobjekt.
3. Ermitteln Sie den Bildlaufabstand der Bildlaufleiste, wenn die Bildlaufleiste scrollt.
4. Die Funktion wird ausgeführt, wenn die Bildlaufleiste scrollt: Der Abstand des Objekts von oben/links wird zum ursprünglichen Abstand von oben/links + der Anzahl der von der Bildlaufleiste gescrollten Pixel.
HTML-Code:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title></title>
</head>
<Körper>
<div id="left">
<img src="images/z1.jpg" alt=""/>
</div>
<div id="right">
<img src="images/z2.jpg" alt=""/>
</div>
</body>
</html> CSS-Code:
*{
Rand: 0;
Polsterung: 0;
}
Körper{
Breite: 2000px;
Höhe: 2000px;
}
.links{
Position: absolut;
Breite: 110px;
Höhe: 110px;
oben: 100px;
links: 50px;
}
.Rechts{
Position: absolut;
Breite: 110px;
Höhe: 110px;
oben: 100px;
links: 1360px;
} js-Code:
var leftT;//Der Abstand zwischen dem linken p und dem oberen var leftL;//Der Abstand zwischen dem linken p und dem linken var rightT;//Der Abstand zwischen dem rechten p und dem oberen var rightL;/ /Der Abstand zwischen dem rechten p und dem linken var objLeft;//P Dokumentobjekt auf der linken Seite var objRight;//P Dokumentobjekt auf der rechten Seite function place(){
objLeft=document.getElementById("left");
objRight=document.getElementById("right");
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;
}
//Ermitteln Sie die Anzahl der Pixel, die von der Bildlaufleistenfunktion move() gescrollt werden.
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
//Setze die Pixel vom linken p nach oben 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";
}
window.onload=place;
window.onscroll=move; Verwandte Empfehlungen: [JavaScript-Video-Tutorial]
Das Obige besteht darin, js zu verwenden, um das Bild an einer bestimmten Position auf dem Bildschirm zu fixieren! Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
