Сеъезжающиеся блоки
Вложений: 1
Уважаемые гуру, подскажите пожалуйста можно ли, и как сделать на базе моего варианта
http://ulkarnaval.ru/slider.html следующую штуку: |--левый блок--|---> наведи на меня <---|--правый блок--| Цель следующая: Чтобы при наведении на "наведи на меня", левый и правый блок реагировали и съезжались, так как сейчас это делает правый в примере, а когда с наведи на меня мышка убиралась - разъезжались назад. Мне кажется на базе того что сейчас есть, это можно реализовать, только вот java-script я не очень знаю. Подскажите можно ли сделать исходя из того что есть и как? спасибо |
Цитата:
<!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>
|
Смотрел в ИЕ7 - работало...
|
Супер!!!!!!) Спасибо ksa
|
| Часовой пояс GMT +3, время: 15:51. |