Idée:
1. Obtenez la distance de l'objet du côté supérieur et gauche ;
2. Obtenez l'objet élément ;
3. Obtenez la distance de défilement de la barre de défilement lorsque la barre de défilement défile ;
4. La fonction est exécutée lorsque la barre de défilement défile : la distance de l'objet depuis le haut/gauche devient la distance d'origine depuis le haut/gauche + le nombre de pixels défilés par la barre de défilement.
code html :
<!DOCTYPE html>
<html>
<tête>
<méta charset="UTF-8">
<titre></titre>
</tête>
<corps>
<div id="gauche">
<img src="images/z1.jpg" alt=""/>
</div>
<div id="right">
<img src="images/z2.jpg" alt=""/>
</div>
</corps>
</html> Code CSS :
*{
marge : 0 ;
remplissage : 0 ;
}
corps{
largeur : 2000px ;
hauteur : 2000px ;
}
.gauche{
position : absolue ;
largeur : 110 px ;
hauteur : 110px ;
haut : 100 px ;
gauche : 50px ;
}
.droite{
position : absolue ;
largeur : 110 px ;
hauteur : 110px ;
haut : 100 px ;
gauche : 1360px ;
} Code js :
var leftT;//La distance entre le p gauche et le haut var leftL;//La distance entre le p gauche et le gauche var rightT;//La distance entre le p droit et le haut var rightL;/ /La distance entre le p droit et le var gauche objLeft;//P objet document à gauche var objRight;//P objet document à droite function place(){
objLeft=document.getElementById("gauche");
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;
}
//Obtenir le nombre de pixels défilés par la fonction de barre de défilement move(){
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
//Définit les pixels de la gauche p vers le haut 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=lieu;
window.onscroll=move; Recommandations associées : [Tutoriel vidéo JavaScript]
Ce qui précède consiste à utiliser js pour fixer l'image à une certaine position sur l'écran ! Pour plus de détails, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !
