アイデア：
1. オブジェクトの上面と左側からの距離を取得します。
2. 要素オブジェクトを取得します。
3. スクロール バーがスクロールするときのスクロール バーのスクロール距離を取得します。
4. この関数は、スクロール バーがスクロールしているときに実行されます。上/左からのオブジェクトの距離は、上/左からの元の距離 + スクロール バーによってスクロールされたピクセル数になります。
htmlコード:
<!DOCTYPE html>
<html>
<頭>
<meta charset="UTF-8">
<タイトル></タイトル>
</head>
<本文>
<div id="左">
<img src="images/z1.jpg" alt=""/>
</div>
<div id="right">
<img src="images/z2.jpg" alt=""/>
</div>
</body>
</html> CSS コード:
*{
マージン: 0;
パディング: 0;
}
体{
幅: 2000ピクセル;
高さ: 2000ピクセル;
}
。左{
位置: 絶対;
幅: 110ピクセル;
高さ: 110ピクセル;
上: 100ピクセル;
左: 50ピクセル;
}
。右{
位置: 絶対;
幅: 110ピクセル;
高さ: 110ピクセル;
上: 100ピクセル;
左: 1360ピクセル;
} js コード:
var leftT;//左 p と上の距離 var leftL;//左 p と左の距離 var rightT;//右 p と上の var rightL の間の距離;/ /右側の p と左側の p の間の距離 var objLeft;//P 左側のドキュメント オブジェクト var objRight;//P 右側のドキュメント オブジェクト function place(){
objLeft=document.getElementById("左");
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;
}
//スクロールバー関数でスクロールしたピクセル数を取得 move(){
varscrollT=document.documentElement.scrollTop;
varscrollL=document.documentElement.scrollLeft;
//左 p から上までのピクセルを設定します 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=場所;
window.onscroll=move;関連する推奨事項: [JavaScript ビデオ チュートリアル]
上記はjsを使って画像を画面上の特定の位置に固定する方法です！詳細については、php 中国語 Web サイトの他の関連記事にご注目ください。
