Форум

materok · #1 (**permalink**) 11.08.2011, 15:08

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

Цель следующая:
Чтобы при наведении на "наведи на меня", левый и правый блок реагировали и съезжались, так как сейчас это делает правый в примере, а когда с наведи на меня мышка убиралась - разъезжались назад.
Мне кажется на базе того что сейчас есть, это можно реализовать, только вот java-script я не очень знаю.
Подскажите можно ли сделать исходя из того что есть и как? спасибо

ksa · #2 (**permalink**) 11.08.2011, 15:59

Сообщение от 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 · #3 (**permalink**) 11.08.2011, 16:00

Смотрел в ИЕ7 - работало...

materok · #4 (**permalink**) 11.08.2011, 18:21

Супер!!!!!!) Спасибо ksa

Форум

Справочник

Discord чат

Курсы javascript