Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.09.2009, 13:16
Аватар для Петр
Интересующийся
Отправить личное сообщение для Петр Посмотреть профиль Найти все сообщения от Петр
 
Регистрация: 27.04.2009
Сообщений: 23

Подскажите как это сделано
Вот сайтик http://logistic.oresco.ru/ тыкаешь на менюшку и он плавно смешает страницу. Причем если масштаб уменьшить, то видно что это как бы одна страница просто сдвигается. В какую сторону копать надо?
Ответить с цитированием
  #2 (permalink)  
Старый 30.09.2009, 14:05
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Сообщение от Петр
В какую сторону копать надо?
Вам непонятно как переместить элемент?
Ответить с цитированием
  #3 (permalink)  
Старый 30.09.2009, 14:16
Аватар для Петр
Интересующийся
Отправить личное сообщение для Петр Посмотреть профиль Найти все сообщения от Петр
 
Регистрация: 27.04.2009
Сообщений: 23

Не особо, то есть по коду там сделано слои и они плавно перемещаются на определенный интервал. Если можно пример какой нить?
Ответить с цитированием
  #4 (permalink)  
Старый 30.09.2009, 14:41
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Вы сами привели ссылку на пример.
Ответить с цитированием
  #5 (permalink)  
Старый 30.09.2009, 18:19
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

В опере вёрстка едет
Ответить с цитированием
  #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.
Ответить с цитированием
  #7 (permalink)  
Старый 01.10.2009, 15:32
Аватар для Петр
Интересующийся
Отправить личное сообщение для Петр Посмотреть профиль Найти все сообщения от Петр
 
Регистрация: 27.04.2009
Сообщений: 23

всем спасибо, все помогло
Ответить с цитированием
  #8 (permalink)  
Старый 01.10.2009, 15:35
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Такой сайт и на таблицах
Ответить с цитированием
  #9 (permalink)  
Старый 01.10.2009, 15:38
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

B~Vladi,
какая разница?
Ответить с цитированием
  #10 (permalink)  
Старый 01.10.2009, 15:48
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от Kolyaj
какая разница?
аааагромная
Не настолько там сложный макет, чтобы прикручивать таблицы.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите как отобразить текст. potkin Общие вопросы Javascript 17 26.10.2017 15:09
Подскажите как сделать меню на CSS если: greatilya (X)HTML/CSS 10 18.10.2009 20:26
Подскажите, пжлст, как вывести в тот же документ результат ф-ции? LexXxeL Элементы интерфейса 4 13.05.2009 13:26
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 07:55
Подскажите как при помощи JS hta в трею свернуть kimboo Общие вопросы Javascript 4 11.07.2008 16:00