VPF::выезжающий блок справа - Форум программистов

Gongadze

Дата 17.8.2007, 08:47 (ссылка)

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

Загрузка ...

Новичок

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

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

Здавствуйте!

Буду благодарен за любые комментарии. За ранее спасибо.

Хочу сделать скрипт выезжание блока справа, но ни как не могу сообразить с выездом блока когда вношу в него информацию (текст или картини).

Код как хотелось что бы выглядело, но при нанесении текста в div id="slider" выходит коряво.

Код


<div style="font-size: 170%; position: absolute; top: 50%; left: 30%;"><b>Нажми на желтую линию</b></div>
<div id="mover" onclick="choose()" style="width:50; height: 100%; background: yellow; position: absolute; top: 0px; right: 50px; cursor: pointer;"></div>
<div id="slider" style="width:200; height: 100%; background: blue; position: absolute; top: 0px; right: 50px; clip: rect(auto auto auto 200)"></div>
<div style="width:50; height: 100%; background: red; position: absolute; top: 0px; right: 0px;"></div>

Код


<script language = "JavaScript">
var ooo = 200; // для обрезки элемента slider с помощью clip
var rrr = 50; // для перемещения элемента mover
var sss = 2; // шаг перемещения 

function choose()
{
    if (document.getElementById("mover").style.right == '50px')
    {
        opener();
    }
    else
    {
        closer();
    }
}


function opener()
{
    var ttt = 1;
    if (ooo > 0){
        ooo -= sss;
        rrr += sss;
        if (ooo < 101 && ooo > 71) //для создания плавности
        {
            ttt = 10;         //для создания плавности
        }
        if (ooo < 71 && ooo > 41)  //для создания плавности
        {
            ttt = 15;         //для создания плавности
        }
        if (ooo < 41)            //для создания плавности
        {
            ttt = 20;        //для создания плавности
        }
        var rect = 'rect(auto, auto, auto, '+ ooo + ')';
        document.getElementById("slider").style.clip = rect;
        document.getElementById("mover").style.right = rrr;
        setTimeout(opener,ttt);
    }
}

function closer()
{
    var ttt = 1;
    if (ooo < 200){
        ooo += sss;
        rrr -= sss;
        if (ooo > 99 && ooo < 129) //для создания плавности
        {
            ttt = 10;       //для создания плавности
        }
        if (ooo > 129 && ooo < 149) //для создания плавности
        {
            ttt = 15;           //для создания плавности
        }
        if (ooo > 149)             //для создания плавности
        {
            ttt = 20;          //для создания плавности
        }
        var rect = 'rect(auto, auto, auto, '+ ooo + ')';
        document.getElementById("slider").style.clip = rect;
        document.getElementById("mover").style.right = rrr;
        setTimeout(closer,ttt);
    }
}
</script>

Еще для примера сделал скрипт, как хотелось бы чтобы выглядело когда нанесен текст. Но т.к. скрипт сделан за счет изменения right у элемента slider он выезжает вправо за экран и появляется горизонтальная прокрутка.

Код


<div style="font-size: 170%; position: absolute; top: 50%; left: 30%;"><b>Нажми на желтую линию</b></div>
<div id="mover" onclick="choose()" style="width:50; height: 100%; background: yellow; position: absolute; top: 0px; right: 250px; cursor: pointer;"></div>
<div id="slider" style="width:200; height: 100%; background: blue; position: absolute; top: 0px; right: 50px;">
dasfddfsa<br>
vxcvxzc
</div>
<div style="width:50; height: 100%; background: red; position: absolute; top: 0px; right: 0px;"></div>

Код


<script language = "JavaScript">
var rrr = 50;
var r1 = 250;
var sss = 2;




function choose()
{
    if (document.getElementById("mover").style.right == '50px')
    {
        opener();
    }
    else
    {
        closer();
    }
}


function opener()
{
    var ttt = 1;
    if (rrr < 50){
        rrr += sss;
        r1 += sss;
        document.getElementById("slider").style.right = rrr;
        document.getElementById("mover").style.right = r1;
        setTimeout(opener,ttt);
    }
}

function closer()
{
    if (rrr > -150){
        rrr -= sss;
        r1 -= sss;
        document.getElementById("slider").style.right = rrr;
        document.getElementById("mover").style.right = r1;
        setTimeout(closer,1);
    }
}
</script>

Это сообщение отредактировал(а) Gongadze - 17.8.2007, 09:38

dXdYdZ

Дата 18.8.2007, 01:07 (ссылка)

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

Загрузка ...

Шустрый

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

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

Эффекты можете посмотреть здесь.

Добавлено через 1 минуту и 40 секунд
(Раздел Эффекты)

Это сообщение отредактировал(а) dXdYdZ - 18.8.2007, 01:07

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