Идея:
1. Получите расстояние до объекта сверху и слева;
2. Получите объект элемента;
3. Получите расстояние прокрутки полосы прокрутки при прокрутке полосы прокрутки;
4. Функция выполняется при прокрутке полосы прокрутки: расстояние до объекта сверху/слева становится исходным расстоянием сверху/слева + количество пикселей, прокручиваемых полосой прокрутки.
HTML-код:
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title></title>
</голова>
<тело>
<div id="слева">
<img src="images/z1.jpg" alt=""/>
</div>
<div id="право">
<img src="images/z2.jpg" alt=""/>
</div>
</тело>
</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 и левым var objLeft;//P объект документа слева var objRight;//P объект документа справа function Place(){
objLeft=document.getElementById("left");
objRight=document.getElementById("право");
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(){
вар ScrollT=document.documentElement.scrollTop;
вар ScrollL=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!
