VPF::Скользящий элемент, как селектор для меню.

Soider

Дата 5.6.2008, 12:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 3.6.2008

Репутация: нет
Всего: нет

Добрый день.

Недавно занялся изучением javascript, и, как один из опытов, был написан вот такой скрипт, заготовка для меню, или чего-то подобного.

Собственно код.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.menu {
float: left; width: 150px; background: #CCCCCC; height: 25px;
}
#selector {width: 150px; height: 25px; clear:both; text-align: right; position:relative; border: 10px solid red; top: -35px; border-left: none; border-right: none;}
-->
</style>
<script type="text/javascript">
var div; // слой

var lay = new Array();
 lay[1] = 0; // Отступ селектора для первого пункта меню
 lay[2] = 150; // Отступ селектора для второго пункта меню
 lay[3] = 300;// Отступ селектора для третьего пункта меню
 lay[4] = 450;// Отступ селектора для четвертого пункта меню
 lay[5] = 600;// Отступ селектора для пятого пункта меню
var left;
var otstup;
var timeout = 8;
var step = 3;

function slide(pos)
    {
        div = document.getElementById('selector');
        left = parseInt(div.style.left);
        otstup = lay[pos];
        sliding();
        
    }
    
    
function sliding()
{

//alert(left);
//alert(otstup);

if (left < otstup) 
{
left = left + step;
div.style.left=left + 'px';
setTimeout(sliding, timeout);

}

if (left > otstup)
{
left = left - step;
div.style.left=left + 'px';
setTimeout(sliding, timeout);
}

}    
</script>
</head>

<body>


<div class="menu" onclick="slide('1');">First</div>
<div class="menu"  onclick="slide('2');">Second</div>
<div class="menu"   onclick="slide('3');">Third</div>
<div class="menu"  onclick="slide('4');">Fourth</div>
<div class="menu"  onclick="slide('5');">Fifth</div>
<div id="selector" style="left: 0px;">


</div>


</body>
</html>

Хочется узнать, почему, когда щелкаешь по пункту второй раз, скорость перемещения слоя-селектора возрастает?

И как можно избавится от этого?

И наоборот, как можно добавить этот эффект в обычную работу скрипта - то есть чтобы скорость движения селектора возрастала, при одинарном щелчке на пункте меню?

Извините, если сумбурно описал =)
и не ругайте особо скрипт - это второй скрипт в моей жизни =))

Это сообщение отредактировал(а) Soider - 5.6.2008, 12:15

bars80080

Дата 5.6.2008, 12:46 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

про скорость не скажу, но он у тебя в ИЕ6 не работал. я чуть подремонтировал и так остался в непонятках, что у тебя там не пазало (пункты 3 и 5 не вызывались)

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.menu { float: left; width: 150px; background: #CCCCCC; height: 25px; }
#selector {width: 150px; height: 25px; clear:both; text-align: right; position:relative; 
    border: 10px solid red; top: -35px; border-left: none; border-right: none; }
</style>
<script type="text/javascript"><!--
var lay = new Array(0,150,300,450,600);
var sdiv, sleft, otstup, stimeout = 8, step = 3, sign = 1;

function slide(id) {
    sdiv = document.getElementById('selector');
    sleft = parseInt(sdiv.style.left);
    otstup = lay[id];
    if(sleft < otstup) sign = 1; else sign = -1;
    sliding(); }
function sliding() {
    sleft = sleft + sign*step;
    if((sleft - otstup)*sign > 0) return;
    sdiv.style.left = sleft + 'px';
    setTimeout('sliding()', stimeout); }
//-->
</script>
</head>
<body>

<div class="menu" id="s0"  onclick="slide(0);">First</div>
<div class="menu" id="s1"  onclick="slide(1);">Second</div>
<div class="menu" id="s2"  onclick="slide(2);">Third</div>
<div class="menu" id="s3"  onclick="slide(3);">Fourth</div>
<div class="menu" id="s4"  onclick="slide(4);">Fifth</div>
<div id="selector" style="left: 0px;">
</div>

</body>
</html>

bars80080

Дата 5.6.2008, 13:02 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

догадался в чём фишка, так будет без ускорения, но по-моему, лучше оставить как есть

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.menu { float: left; width: 150px; background: #CCCCCC; height: 25px; }
#selector {width: 150px; height: 25px; clear:both; text-align: right; position:relative; 
    border: 10px solid red; top: -35px; border-left: none; border-right: none; }
</style>
<script type="text/javascript"><!--
var lay = new Array(0,150,300,450,600);
var sdiv, sleft, otstup, stimeout = 8, step = 3, sign = 1, blokirator = 0;

function slide(id) {
    if(blokirator == 1) return;
    sdiv = document.getElementById('selector');
    sleft = parseInt(sdiv.style.left);
    otstup = lay[id];
    if(sleft < otstup) sign = 1; else sign = -1;
    blokirator = 1;
    sliding(); }
function sliding() {
    sleft = sleft + sign*step;
    if((sleft - otstup)*sign > 0) { blokirator = 0; return; }
    sdiv.style.left = sleft + 'px';
    setTimeout('sliding()', stimeout); }
//-->
</script>
</head>
<body>

<div class="menu" id="s0"  onclick="slide(0);">First</div>
<div class="menu" id="s1"  onclick="slide(1);">Second</div>
<div class="menu" id="s2"  onclick="slide(2);">Third</div>
<div class="menu" id="s3"  onclick="slide(3);">Fourth</div>
<div class="menu" id="s4"  onclick="slide(4);">Fifth</div>
<div id="selector" style="left: 0px;">
</div>

</body>
</html>

Soider

Дата 6.6.2008, 10:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 3.6.2008

Репутация: нет
Всего: нет

Не, блокиратор хреновенький, теперь нужно дождаться пока слайдер съездит к блоку, прежде чем щелкать по другому(

bars80080

Дата 6.6.2008, 10:24 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

я и говорю, лучше оставить как есть. чем тебя увеличение скорости не устраивает?
мне даже нравится интерактивность такая

Soider

Дата 8.6.2008, 14:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 3.6.2008

Репутация: нет
Всего: нет

Ну тут дело не в нравится-ненравится, я это все равно использовать на практике не хочу, а в том что мне понять интересно =)

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »