Показать сообщение отдельно
  #6 (permalink)  
Старый 30.09.2009, 20:49
Аспирант
Отправить личное сообщение для PepeL Посмотреть профиль Найти все сообщения от PepeL
 
Регистрация: 30.09.2009
Сообщений: 61

body{
margin:0px;
padding:0px; }

#Main {
position:relative;
width:right;
height:100%;
overflow:hidden;
background:url(Bg2.png);
background-repeat:repeat-y; }

.Panel {
position:absolute;
width:500px;
height:50px;
top:10px;
left:10px;
z-Index:3; }

.ImgBg {
position:absolute;
width:6900px;
top:-350px;
left:700px; }


var Start,Finish;
function But(finish){
 //Определяем положение горизонтального скроула и перводим в численное значение 
 Start = parseInt(Main.scrollLeft);
 //Задаем значение на которое должен сдвинуться документ внутри дива.
 Finish = finish;
//Запускаем следующую функцию
 setTimeout("Cycle()",0);}


function Cycle(){
//Задаем интервал смещения
 Step=100;
 MainLeft = parseInt(Main.scrollLeft);

//Если заданное значение необходимого положения больше чем в данный момент,то смещаем документ вправо
 if(Finish>Start){ 
  NewMainLeft = MainLeft+Step;
  //Если до конечного значения осталось меньше 100 px уменьшаем интервал 
  if(MainLeft>Finish-Step){ NewMainLeft = MainLeft+5;}
  Main.scrollLeft = NewMainLeft;
  var Timer = setTimeout("Cycle()",10);
  //Останавливаем функцию, если достигли нужного положения
  if(NewMainLeft>=Finish){ clearTimeout(Timer);} }

//Если заданное значение необходимого положения меньше чем в данный момент,то смещаем документ влево
else{
  NewMainLeft = MainLeft-Step;
  //Если до конечного значения осталось меньше 100 px уменьшаем интервал
  if(MainLeft<Finish+Step){ NewMainLeft = MainLeft-5;}
  Main.scrollLeft = NewMainLeft;
  var Timer = setTimeout("Cycle()",10);
  //Останавливаем функцию, если достигли нужного положения
  if(NewMainLeft<=Finish){ clearTimeout(Timer);}  }
 }


<table class="Panel">
<tr>
<td align="center"><input type="button" onmousedown="But(0)" value="Кнопка 1"></td>
<td align="center"><input type="button" onmousedown="But(2250)" value="Кнопка 2"></td>
<td align="center"><input type="button" onmousedown="But(4500)" value="Кнопка 3"></td>
<td align="center"><input type="button" onmousedown="But(6750)" value="Кнопка 4"></td>
</tr>
</table>

<div id="Main"><img src="Bg1.png" class="ImgBg"><div>

Скрипт, можно и покомпактнее сделать при желании...

Последний раз редактировалось PepeL, 30.09.2009 в 21:27.
Ответить с цитированием