Ideia:
1. Obtenha a distância do objeto do lado superior e esquerdo;
2. Obtenha o objeto do elemento;
3. Obtenha a distância de rolagem da barra de rolagem quando a barra de rolagem rola;
4. A função é executada quando a barra de rolagem está rolando: a distância do objeto do topo/esquerda torna-se a distância original do topo/esquerda + o número de pixels rolados pela barra de rolagem.
código html:
<!DOCTYPEhtml>
<html>
<cabeça>
<meta charset="UTF-8">
<título></título>
</head>
<corpo>
<div id="esquerda">
<img src="images/z1.jpg" alt=""/>
</div>
<div id="direita">
<img src="images/z2.jpg" alt=""/>
</div>
</body>
</html> código CSS:
*{
margem: 0;
preenchimento: 0;
}
corpo{
largura: 2000px;
altura: 2.000 pixels;
}
.esquerda{
posição: absoluta;
largura: 110px;
altura: 110px;
superior: 100px;
esquerda: 50px;
}
.certo{
posição: absoluta;
largura: 110px;
altura: 110px;
superior: 100px;
esquerda: 1360px;
} código js:
var leftT;//A distância entre o p esquerdo e o topo var leftL;//A distância entre o p esquerdo e o esquerdo var rightT;//A distância entre o p direito e o topo var rightL;/ /A distância entre a direita p e a esquerda var objLeft;//P objeto de documento à esquerda var objRight;//P objeto de documento à direita function place(){
objLeft=document.getElementById("esquerda");
objRight=document.getElementById("certo");
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;
}
//Obtém o número de pixels rolados pela função da barra de rolagem move(){
var scrollT=document.documentElement.scrollTop;
var scrollL=document.documentElement.scrollLeft;
//Define os pixels da esquerda p para o topo 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";
}
janela.onload=lugar;
window.onscroll=move; Recomendações relacionadas: [tutorial em vídeo JavaScript]
O acima é usar js para fixar a imagem em uma determinada posição na tela! Para mais detalhes, preste atenção a outros artigos relacionados no site php chinês!
