Форум

sanaj · #1 (**permalink**) 14.03.2013, 18:25

Есть DIV в котором еще 4. Хочу сделать так, чтобы при наведении курсора в область где они расположены, эти четыре div`a постепенно меняли высоту до определенной. Проблема в том что при наведении, меняется на 1 пиксель и останавливается. Не могу найти ошибку в скрипте

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>

<body bgcolor="red">
<style>
#postcards{
height: 275px;
width: 340px;
background-color: black;
	position: absolute; left: 220px;top:337px;"
}

#postcards1,#postcards2,#postcards3,#postcards4{
background-color: #62b2ff;
text-align: center;}
</style>
<div id="postcards" onmouseover="f(event)">
<div id="postcards1" style=" position:absolute; left: 0px; top: 0px; height:137px;width: 170px;"></div>
<div id="postcards2" style=" position:absolute; left: 0px; top: 137px;height:137px;width: 170px;"></div>
<div id="postcards3" style=" position:absolute; left: 170px; top: 0px;height:137px;width: 170px;"></div>
<div id="postcards4" style=" position:absolute; left: 170px; top: 137px;height:137px;width: 170px;"></div>
</div>
<script>
var a=document.getElementById('postcards1');
function f(event) {
event=event || window.event;
var target = event.target || event.srcElement;
if (parseInt(a.style.height)>10&&(target.id=='postcards4'||target.id=='postcards3'||target.id=='postcards2'||target.id=='postcards1'||target.id=='postcards'))
{
a.style.height=parseInt(a.style.height)-1+'px';
setTimeout("f(event)",100);
}}

</script>
</body>
</html>

rgl · #2 (**permalink**) 14.03.2013, 18:47

Ошибка - когда срабатывает таймаут, event уже не существует.

function f(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  function f2() {
    if (parseInt(a.style.height)>10&&(target.id=='postcar ds4'||target.id=='postcards3'||target.id=='postcar ds2'||target.id=='postcards1'||target.id=='postcar ds')) {
      a.style.height=parseInt(a.style.height)-1+'px';
      setTimeout(f2,100);
    }
  }
  f2();
}

рони · #3 (**permalink**) 14.03.2013, 18:48

sanaj,

setTimeout(function ()
{
   f(event)
},100);

учтите чем больше двигать мышь тем больше будет запущено функций тем быстрее скорость
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

ksa · #4 (**permalink**) 14.03.2013, 18:52

Сообщение от sanaj

Не могу найти ошибку в скрипте

Твой скрипт даже просто загрузившись дает ошибку и пишет в какой строке (30)

target = event.target || event.srcElement;

ksa · #5 (**permalink**) 14.03.2013, 18:54

Вот это еще грузится без ошибок...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
body {
	background-color: red;
}
#postcards{
height: 275px;
width: 340px;
background-color: black;
	position: absolute; left: 220px;top:337px;"
}
#postcards > div {
	position: absolute;
	width: 170px;
	background-color: #62b2ff;
	text-align: center;
}
</style>
<script type="text/javascript">
function test(event) {
	event=event || window.event;
	var a=document.getElementById('postcards1');
	var target = event.target || event.srcElement;
/*
	var typ=parseInt(a.style.height)>10&&(target.id=='postcards4'||target.id=='postcards3'||target.id=='postcards2'||target.id=='postcards1'||target.id=='postcards'
	if (typ)) {
		a.style.height=parseInt(a.style.height)-1+'px';
		setTimeout(function (){
			f(event);
		},100);
	}
*/
}
</script>
</head>
<body>
<div id="postcards" onmouseover="test(event)">
	<div id="postcards1" style="left: 0px; top: 0px;height:137px;"></div>
	<div id="postcards2" style="left: 0px; top: 137px;height:137px;"></div>
	<div id="postcards3" style="left: 170px; top: 0px;height:137px;"></div>
	<div id="postcards4" style="left: 170px; top: 137px;height:137px;"></div>
</div>
</body>
</html>

rgl · #6 (**permalink**) 14.03.2013, 19:04

Сообщение от ksa

Твой скрипт даже просто загрузившись дает ошибку и пишет в какой строке (30)

target = event.target || event.srcElement;

А что в этой строке не так? Тем более, до того, как она будет исполняться?
У меня ошибку выдает гораздо раньше, в стилях непарная кавычка:
position: absolute; left: 220px;top:337px;"

danik.js · #7 (**permalink**) 14.03.2013, 19:17

А че должны получить в итоге? Это?

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body bgcolor="red">
    <style>
    #postcards{
        height: 275px;
        width: 340px;
        background-color: black;
        position: absolute; left: 220px;top:337px;"
    }
    
    #postcards1,#postcards2,#postcards3,#postcards4{
        background-color: #62b2ff;
        text-align: center;
    }
    </style>
    <div id="postcards">
    <div id="postcards1" style=" position:absolute; left: 0px; top: 0px; height:137px;width: 170px;"></div>
    <div id="postcards2" style=" position:absolute; left: 0px; top: 137px;height:137px;width: 170px;"></div>
    <div id="postcards3" style=" position:absolute; left: 170px; top: 0px;height:137px;width: 170px;"></div>
    <div id="postcards4" style=" position:absolute; left: 170px; top: 137px;height:137px;width: 170px;"></div>
    </div>
    <script>
    var container = document.getElementById('postcards');
    var items = container.getElementsByTagName('*');
    container.onmouseover = function(event) {
        var height = parseInt(items[0].style.height);
        (function(){
            height -= 1;
            if (height > 10) {
                for (var i = 0; i < items.length; i ++) {
                    items[i].style.height = height + 'px';
                }
                setTimeout(arguments.callee, 100);
            }
        })();
        container.onmouseover = null;
    }
    </script>
</body>
</html>

sanaj · #8 (**permalink**) 14.03.2013, 19:39

Спасибо, разобрался, danik.js, да, хотел в итоге так, как сделали вы

Форум

Справочник

Discord чат

Курсы javascript