Javascript.RU

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

Помогите пожалуйста новичку.
Всем привет!

Делаю сайт на jQuery , совсем недавно знаком с этой библиотекой, в общем суть задачи в следующем:

Есть сайт , по бокам у него стрелочки, вверх , вниз , влево и вправо , соотв. нажимая вверх , сайт как бы уезжает вниз на 3 экрана и показывается другой раздел , в общем суть в том , что экраны ездят.

Я весь код написал , он работает во всех браузерах , кромее... правильно! IE! , вверх у меня экран съезжает , а вниз не возвращается , прыгает и все , потом белый экран ставновится , т.к. на том месте никаких элементов не прописано.

двигаю элементы так:

var last="";  
	var mode=0;                                   
	function goUp() {
		last="-=250%";
		mode=2;
	    $("div.block").animate({top: "+=250%"}, 1200);
        return false;
	}
	function goDown() {
		last="+=300%";
		mode=2;
	    $("div.block").animate({top: "-=300%"}, 1200);
        return false;
	}	
	function goLeft() {
		last="-=300%";
		mode=1;
	    $("div.block").animate({left: "+=300%"}, 1200);
        return false;
	}
	function goRight() {
		last="+=200%";
		mode=1;
	    $("div.block").animate({left: "-=200%"}, 1200);
        return false;
	}	
	function goBack() {
	 if (last!="" && mode>0) {
	 	//alert(last);
			if (mode==1)
			//äëÿ âîçâðàòà ïî x
				$("div.block").animate({left: last}, 1200);
			if (mode==2) 
			//äëÿ âîçâðàòà ïî y
				$("div.block").animate({top: last}, 1200);
			last="";
			mode=0;
	 }
	}


Кто поможет? Что я делаю не так , в Safari , Opera , Firefox и Google Chrome все ровно , работает как нужно )
Ответить с цитированием
  #2 (permalink)  
Старый 03.07.2009, 23:52
Аспирант
Отправить личное сообщение для deepslam Посмотреть профиль Найти все сообщения от deepslam
 
Регистрация: 03.07.2009
Сообщений: 44

Да , стили такие:

* {
margin:0px;
padding:0px;
}
html, body {
	margin:0;
	padding:0;
	border:0;
	height:100%;
	border-collapse: collapse;
	font-family: Tahoma , Helvetica , Sans serif;
	font-size: 12px;
	color:#000000;
	overflow:hidden;
}

a {
	color:#5C2E04;
	font-size:12px;
	font-family: Tahoma , Helvetica , Sans serif;
	text-decoration:underline;
}

a:hover {
	color:#261200;
	font-size:12px;
	font-family: Tahoma , Helvetica , Sans serif;
	text-decoration:underline;
}

/*classes*/
.block {
	width:100%;
	height:100%;
	position:absolute;
	z-index:99;
}
.imglink {
	cursor:pointer;
}
/*classes*/

/*id*/
#load {
	z-index:1000;
	width:100%;
	height:100%;
	text-align:center;
	background:#a8a8a8;
}
#about {
	width:2000px;
	height:250%;
	left:0;
	top:-250%;
	background:#683DFC url('../img/about.png') top repeat-x;
	position:absolute;
}
	#about_content {
		z-index:101;
		width:100%;
		height:100%/*ie*/;
		left:0;
		top:-250%;
		position:absolute;
	}
#portfolio {
	width:300%;
	height:1200px;
	left:-300%;
	background:url('../img/portfolio.png') no-repeat center;
	position:absolute;
}
	#portfolio_content {
		z-index:101;
		width:100%;
		height:100%;
		left:-300%;
		top:0;
		position:absolute;
	}
#index {
	left:50%;
	top:50%;
	width:2000px;
	height:1200px;
	margin-left:-1000px;
	margin-top:-600px;
	background:url('../img/index.png') no-repeat center;
	z-index:102;
	position:absolute;
}
	#index_content {
		z-index:103;
		top:0px;
		left:0px;
		position:absolute;
	}
#contacts {
	width:300%;
	height:1200px;
	left:100%;
	top:0px;
	background:#683DFC url('../img/contacts.png') repeat-y top right;
	position:absolute;
}
	#contacts_content {
		z-index:101;
		width:100%;
		height:100%;
		left:200%;
		top:0;
		position:absolute;
	}
#clients {
	width:2000px;
	height:400%;
	top:100%;
	background:#683DFC url('../img/clients.png') bottom repeat-x;
	position:absolute;
}
	#clients_content {
		z-index:101;
		width:100%;
		height:100%;
		left:0;
		top:300%;
		position:absolute;
	}
#controls {
	width:300px;
	height:300px;
	position:absolute;
	z-index:100;
}
/*id*/


На ВСЕХ div'ах стоит class="block" и соотв. его ID
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2009, 20:50
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а откуда ты взял такой способ задания анимации: animate({top: "+=250%"}, 1200)?
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2009, 15:18
Аспирант
Отправить личное сообщение для deepslam Посмотреть профиль Найти все сообщения от deepslam
 
Регистрация: 03.07.2009
Сообщений: 44

С одного из учебных сайтов по jQuery )
А как будет правильно , подскажите пожалуйста ;-) ?
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2009, 19:31
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

сорри, не заметил, что можно и так
ну тогда аттач в топик архив со страничкой
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2009, 14:29
Аспирант
Отправить личное сообщение для deepslam Посмотреть профиль Найти все сообщения от deepslam
 
Регистрация: 03.07.2009
Сообщений: 44

Весь код пока не очень хочу светить , хочу разобраться сам.
Подскажите , а как еще делается такая анимация (движение объектов)? Я попробую сам и если не получится, то напишу здесь.

А если все выйдет , напишу в чем была проблема )
Ответить с цитированием
  #7 (permalink)  
Старый 06.07.2009, 17:01
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

Сообщение от deepslam
Весь код пока не очень хочу светить
сделай тестовый неработающий пример

Цитата:
а как еще делается такая анимация
руками, без jQuery
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2009, 12:40
Аспирант
Отправить личное сообщение для deepslam Посмотреть профиль Найти все сообщения от deepslam
 
Регистрация: 03.07.2009
Сообщений: 44

Вот ссылка - http://test.imagi-nation.ru
Ответить с цитированием
  #9 (permalink)  
Старый 13.07.2009, 12:20
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

постепенно упрощай страницу. В какой-то момент оно заработает и ты узнаешь из-за чего оно не работало (последнее изменение)

p.s. в опере можно с помощью колесика мышки попасть на верхний/нижний экраны
Ответить с цитированием
  #10 (permalink)  
Старый 13.07.2009, 12:27
Аспирант
Отправить личное сообщение для deepslam Посмотреть профиль Найти все сообщения от deepslam
 
Регистрация: 03.07.2009
Сообщений: 44

Окей, спасибо за совет )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пожалуйста, помогите создать Web-страницу, содержащую заданную форму Mikhail Работа 1 13.05.2009 23:41
Пожалуйста, помогите создать Web-страницу, содержащую заданную форму Mikhail Элементы интерфейса 2 13.05.2009 21:57
Помогите пожалуйста!!! Рудольф Еремян Общие вопросы Javascript 2 11.01.2009 12:41
Помогите, пожалуйста zashibis Общие вопросы Javascript 1 02.12.2008 13:07
Помогите пожалуйста Гость Общие вопросы Javascript 1 23.02.2008 08:17