VPF::Панорама ( горизонтальный скролл )

odionysus

Дата 1.3.2010, 17:28 (ссылка)

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

Загрузка ...

Новичок

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

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

Нужно реализовать панораму из картинки 9000 на 800. Своего рода горизонтальная галерея на весь экран. При инициализации пользователь видит центр это картинки. Все что выходит за размеры экрана, он естественно не видит, при подведении курсора к боковым областям экрана ( слева и справа ) картинка начинает прокручиваться в соответствующую сторону автоматический. Так происходит до тех пор пока не будет достигнут край картики. Скролл-бар нет.
Кто нибудь видел что то подобное ( не на флеше ) ?
Приветствуются ссылки где есть подобное, библиотеки, примеры.
Заранее огромное спасибо за помощь.

Amphiluke

Дата 1.3.2010, 18:44 (ссылка)

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

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Вот легкий примерчик.

Код


<!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>Документ без названия</title>
<style type="text/css">
    #central {
        border: 1px solid black;
        overflow: hidden;
        width: 100%;
    }
    #scrlleft, #scrlrght {
        background: #FFFFCC;
        height: 100%;
        position: fixed;
        top: 0px;
        width: 10px;
        z-index: 10000;
    }
    #scrlleft {
        left: 0px;
    }
    #scrlrght {
        right: 0px;
    }
</style>
<script type="text/javascript">
    var scrollGlrObj = {obj: null, timer:0, value:0};
    function scrolling() {
        scrollGlrObj.obj.scrollLeft += scrollGlrObj.value;
    }
    function goscroll(scrollValue) {
        if (scrollValue) {
            scrollGlrObj.obj = document.getElementById("central");
            scrollGlrObj.value = scrollValue;
            scrollGlrObj.timer = window.setInterval(scrolling, 50);
        } else {
            window.clearInterval(scrollGlrObj.timer);
            scrollGlrObj.timer = 0;
        }
    }
</script>
</head>

<body>
    <div id="scrlleft" onmouseover="goscroll(-5);" onmouseout="goscroll(0);"></div>
    <div id="scrlrght" onmouseover="goscroll(5);" onmouseout="goscroll(0);"></div>
    <div id="central">
        <img src="http://forum.vingrad.ru/style_images/2/menu/menu.gif" alt="gallery" width="9000" height="800" />
    </div>
</body>
</html>

Добавлено через 5 минут и 43 секунды
Можно добавить это в скрипт, чтобы изначально был виден центр галереи, а не ее левый край.

Код


    window.onload = function() {
        var glrdiv = document.getElementById("central");
        glrdiv.scrollLeft = glrdiv.scrollWidth >> 1;
    }

odionysus

Дата 1.3.2010, 19:54 (ссылка)

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

Загрузка ...

Новичок

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

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

Огромное вам спасибо - то что нужно )
но я обнаружил при размере ПНГшки в 5 мегабайт в опере и эксплорере тормоза
+ мне еще нужен будет второй слой, полупрозрачный. Вроде переднего плана, он будет скролится быстрее. Его размер тоже 5 метров.
Боюсь что кроме как флешем не решить это (

12345c

Дата 1.3.2010, 20:19 (ссылка)

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

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

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

Да, полупрозрачные слои ещё тормознее (раза в 2-2.5), чем непрозрачные, особенно в 9-х Операх были, в 10-й - не знаю как.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

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