Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Двигающийся DIV / 10 сообщений из 10, страница 1 из 1
27.11.2008, 16:52
    #35679934
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Есть 2 DIV один содержит текст главной страницы сайта, второй невидимый, как сделать чтобы 2-ой див после клика на ссылку как бы выезжал справо налево и замещал 1-й див?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2008, 17:03
    #35679982
Ренат
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
как тут?
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
var anim_width;
var anim_type=Math.round(Math.random()* 2 );

function animMask(){
	if(anim_type== 0 ){
		anim_width=document.body.clientWidth;
		document.getElementById("pageLayout").style.left=anim_width+"px";
		document.getElementById("pageLayout").style.display="";
		setTimeout("_animMask()", 10 );
	}else if(anim_type== 1 ){
		anim_width=document.body.clientWidth;
		document.getElementById("pageLayout").style.left=(-anim_width)+"px";
		document.getElementById("pageLayout").style.display="";
		setTimeout("_animMask()", 10 );
	}else if(anim_type== 2 ){
		anim_width=document.body.clientHeight;
		document.getElementById("pageLayout").style.top=(anim_width)+"px";
		document.getElementById("loadMask").style.height=(anim_width)+"px";
		document.getElementById("pageLayout").style.display="";
		setTimeout("_animMask()", 10 );
		}
	return false;
	}
	

function _animMask(){
	if(anim_type== 0 ){
		anim_width-= 35 ;
		document.getElementById("pageLayout").style.left=anim_width+"px";
		document.getElementById("loadMask").style.width=(document.getElementById("loadMask").offsetWidth- 35 )+"px";
		if(anim_width> 35 ){
			setTimeout("_animMask()", 10 );
			}else{
			document.getElementById("loadMask").style.display="none";
			scroll_next(true);
			}
	}else if(anim_type== 1 ){
		anim_width-= 35 ;
		document.getElementById("pageLayout").style.left=-anim_width+"px";
		document.getElementById("loadMask").style.width=(document.getElementById("loadMask").offsetWidth- 35 )+"px";
		document.getElementById("loadMask").style.left=(document.getElementById("loadMask").offsetLeft+ 35 )+"px";
		if(anim_width> 35 ){
			setTimeout("_animMask()", 10 );
			}else{
			document.getElementById("loadMask").style.display="none";
			scroll_next(true);
			}
	}else if(anim_type== 2 ){
		anim_width-= 35 ;
		document.getElementById("pageLayout").style.top=anim_width+"px";
		document.getElementById("loadMask").style.height=(document.getElementById("loadMask").offsetHeight- 35 )+"px";
		if(anim_width> 35 ){
			setTimeout("_animMask()", 20 );
			}else{
			document.getElementById("loadMask").style.display="none";
			scroll_next(true);
			}
		}
	return false;
	}
Здесь pageLayout - твой главный контент, а loadMask - то что выезжает
Для "интересности" выезжать будет с 3х сторон
А вызываетсья так:
<a href=# onclick="return animMask()">тынц</a>
думаю мона код как нить даже покороче сделать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2008, 17:57
    #35680173
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Смысл столько городить, когда добавляя 16-килобайтную библиотеку jQuery, все это можно сделать одной строкой? К тому же это совершенно кроссбраузерно и скорость "выезда" можно регулировать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2008, 18:00
    #35680181
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
IDVsbruckСмысл столько городить, когда добавляя 16-килобайтную библиотеку jQuery, все это можно сделать одной строкой? К тому же это совершенно кроссбраузерно и скорость "выезда" можно регулировать.
Что правда - то правда. Хотя, я и не любитель жквери.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2008, 18:01
    #35680185
Ренат
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Вы серьезно думаете что тот код что я написал весит больше 16кб???
зы. и тута три варианта выезда просто еще.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2008, 18:05
    #35680195
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Ренат,

Не в этом дело, там просто уже реализована всякая анимация. Прикрутить её очень легко и в коде не надо разбираться. И примерчики есть. Для себя я бы тоже, ясен помидор, ручками написал.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.11.2008, 18:08
    #35680202
Ренат
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Аа, ну не так понял)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.11.2008, 11:12
    #35681280
armix2000
armix2000
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
IDVsbruckСмысл столько городить, когда добавляя 16-килобайтную библиотеку jQuery, все это можно сделать одной строкой? К тому же это совершенно кроссбраузерно и скорость "выезда" можно регулировать.

Киньте ссылку, я не нашел подобного на jquery.com!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.11.2008, 11:37
    #35681387
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Вот всякие примочки, на жквери, которые можно как есть целиком использовать. А в жквери есть анимация, которую просто использовать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
28.11.2008, 14:07
    #35681960
IDVsbruck
IDVsbruck
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Двигающийся DIV
Для базовой анимации (выезжания, затухания, свертывания и т.д.) дополнительные библиотеки не нужны - только базовая.
А лучшая русская дока по jQuery - это тут .

Что до кода - 16 кБ - это сущий пустяк, за который и вспоминать не надо. А если облегчит жизнь, то и 100 или 200 не надо. Но в коду смущает offset... - ведь поведение в при разных доктайпах разное, или client... - не все браузеры одинаково реагируют на эти атрибуты. Как с этим быть? И так далее ... Есть статические вещи, которые надо делать ручками, но анимация - не та вещь, которую надо выдумывать снова и снова.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Двигающийся DIV / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 734ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1455507]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 405ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 29ms
get tp. blocked users:
 1ms
others: 256ms
total:  734ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]