Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.08.2011, 14:08
Новичок на форуме
Отправить личное сообщение для materok Посмотреть профиль Найти все сообщения от materok
 
Регистрация: 11.08.2011
Сообщений: 2

Сеъезжающиеся блоки
Уважаемые гуру, подскажите пожалуйста можно ли, и как сделать на базе моего варианта
http://ulkarnaval.ru/slider.html
следующую штуку:
|--левый блок--|---> наведи на меня <---|--правый блок--|

Цель следующая:
Чтобы при наведении на "наведи на меня", левый и правый блок реагировали и съезжались, так как сейчас это делает правый в примере, а когда с наведи на меня мышка убиралась - разъезжались назад.
Мне кажется на базе того что сейчас есть, это можно реализовать, только вот java-script я не очень знаю.
Подскажите можно ли сделать исходя из того что есть и как? спасибо
Вложения:
Тип файла: zip index.zip (811 байт, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 11.08.2011, 14:59
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,879

Сообщение от materok
можно ли сделать исходя из того что есть и как?
Как-то так...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	overflow-x: hidden;
}
</style>
<script type="text/javascript">
</script>
</script>
</head>
<body>
<div id="left" style="width: 570px; height: 50%; border-right: 5px dashed #eee; background: #ffffff; position: absolute; left: -250px; margin-top: 100px;font-size:97px;">
	<span style="display: block;position: absolute;top: 30%;">Часть слева</span>
</div>

<div id="right" style="width: 570px; height: 50%; border-left: 5px dashed #eee; background: #ffffff; position: absolute; right: -250px; margin-top: 100px;font-size:97px;">
	<span style="display: block;position: absolute;top: 30%;padding-left:5%;">Часть справа</span>
</div>

<div style="width:220px; margin-left:38%;margin-top: 37%;position: absolute;font-size:65px;color:#ffffff;background:#000000; text-align:center;">
	<A id='center' HREF="#bottom" style="color:#ffffff;">Наведи</A>
</div>

<script type="text/javascript">
function slide(obj, direction, b) {
	clearInterval(window.z);
	counter = 0;
	z = setInterval(function () {
		if (b ? parseInt(obj.style.right) < 0 : parseInt(obj.style.right) > -250) {
			obj.style.right = parseInt(obj.style.right) + direction + 'px';
			counter++;
		} else {
			clearInterval(z);
		}
	},
	1);
}
function slide1(obj, direction, b) {
	clearInterval(window.z1);
	counter1 = 0;
	z1 = setInterval(function () {
		if (b ? parseInt(obj.style.left) < 0 : parseInt(obj.style.left) > -250) {
			obj.style.left = parseInt(obj.style.left) + direction + 'px';
			counter1++;
		} else {
			clearInterval(z1);
		}
	},
	1);
}
	var oc = document.getElementById('center');
	oc.onmouseover = function () {
		slide(document.getElementById('right'), 3, true);
		slide1(document.getElementById('left'), 3, true);
	}
	oc.onmouseout = function () {
		slide(document.getElementById('right'), -3, false);
		slide1(document.getElementById('left'), -3, false);
	}
</script>
</body>
</html>

Последний раз редактировалось ksa, 11.08.2011 в 15:06.
Ответить с цитированием
  #3 (permalink)  
Старый 11.08.2011, 15:00
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,879

Смотрел в ИЕ7 - работало...
Ответить с цитированием
  #4 (permalink)  
Старый 11.08.2011, 17:21
Новичок на форуме
Отправить личное сообщение для materok Посмотреть профиль Найти все сообщения от materok
 
Регистрация: 11.08.2011
Сообщений: 2

Супер!!!!!!) Спасибо ksa
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меняем блоки местами Luter1984 Общие вопросы Javascript 3 18.12.2010 09:37
Сворачивающиеся/разворачивающиеся блоки текста kuraiame Элементы интерфейса 3 05.05.2010 12:36
Выдвигающиеся блоки kamikadze jQuery 0 09.10.2009 14:59
блоки с одинаковыми DIV названиями GAZok Элементы интерфейса 1 11.08.2009 09:46
Резиновые блоки на странице andrey_K jQuery 1 29.08.2008 09:07