Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Выкатывающийся div


Автор: Amond 25.2.2009, 14:23
Здравствуйте я новичок как на форуме так и в javascript. Подскажите пожалуйста как сделать так чтобы при onmousedown div выезжал и оставался до тех пор пока снова не нажмешь на туже ссылку, т.е. повторный onmousedown только с другой функцией. Я в силу незнаний не могу сделать как положено. Меню выкатывает но при нажатии чтобы его обратно закатить оно трясется но не убирается!

Код

<html>
<head>

<script type="text/javascript">
    i = 5;                                  // Это количество пикселей на которые увеличивается выдвигающееся меню.
function b() {                         // Функция задает интервал выполнения функции $group
    setInterval("$goup()", 1)
    $goup()
}
function $goup() {                 // Эта функция увеличивает height меню на 5px
    var heig = parseInt(document.all.player.style.height);  // Присваиваю начальное значение height
    if (heig < 50) {                                                               // Пока height < 50 будет выполняться увеличение
        document.all.player.style.display = "block"               
    document.all.player.style.height = i + heig;              // Увеличиваю на 5px
    document.all.Home.style.display = "none";               // Тут убирается изображение
    document.all.uo.style.display = "none";                   // А тут ссылка, которая выполняла этот "цикл"
    $selectid();
    }
}
function $selectid() {                                             // Эта функция заменяет предыдущую ссылку на другую незаметно
    document.all.Home1.style.display = "block";
    document.all.uo1.style.display = "block";
}


function a() {                                                       // Тут начинается тоже самое что и в предыдущей функции, только уже на уменьшение этого меню и так же с заменой ссылок
    setInterval("$godown()", 1)
    $godown()
}
function $godown() {
    var heig1 = parseInt(document.all.player.style.height);
    if (heig1 > 0) {
    document.all.player.style.height = heig1 - i;
    $selectid1();
    }
}
function $selectid1() {
    document.all.Home1.style.display = "none";
    document.all.uo1.style.display = "none";
    document.all.Home.style.display = "block";
    document.all.uo.style.display = "block";
}

function $erg() {
}

</script>
<title>Main</title>
</head>

<body>
<table border="0" class="maintab">
<td>
<a name="uo" href="javascript:$erg();" onMouseDown="b();" style="display:block;"><img src="images/offHome.png" name="Home" width="120" height="18" /></a>
<a name="uo1" href="javascript:$erg();" onMouseDown="a();" style="display:none;"><img src="images/offHome.png" name="Home1" width="120" height="18" style="display:none"/></a>
<div id="player" style="height: 0; width: 180; background-color:#333; display: none;" ></div></td></table>
</body>
</html>

Автор: Padonak 18.3.2009, 11:05
не связывайся со скриптами в которых есть только document.all это несерьезно. 

Автор: IDVsbruck 18.3.2009, 15:41
Переназначать событие ссылке (диву).
Только вот времена уже такие, что ручками это можно/нужно делать токмо для учебы, а фреймворки справляются с этим за пару строк.
К примеру, с помощью jQuery можно реализовать плавно раскрытие/закрытие за 4-6 строк, причем, полностью кроссбраузерно, плавно, за нужное время и с желаемыми элементами анимации. Не думаю, что будучи относительным новичком, можно придумать что-то более стоящее ... ИМХО.

Автор: Metros 27.4.2009, 07:14
Код

<html>
<head>
<script type="text/javascript">
    var up=true;
    i=5;
    max=50;
    function updown(){
        var heig = parseInt(document.all.player.style.height);
        if(up){
            document.all.player.style.display = "block"
            if(heig<max){               
                document.all.player.style.height = i + heig;
                setTimeout("updown();",1);
            }else{
                up=false;
            }
        }else{
            if(heig>0){
                document.all.player.style.height = heig - i;
                setTimeout("updown();",1);
            }else{
                document.all.player.style.display = "none";
                up=true;
            }            
        }
    }
    function erg(){
    }
</script>
</head>
<body>
<a href='javascript:erg()' name='link' onmousedown='updown()'>=^_^=</a>
<div id="player" style="height: 0; width: 180; background-color:#333; display: none;"></div>
</body>
</html>


вот, если нада скриптом

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)