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


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

Автор: Amphiluke 1.3.2010, 18:44
Вот легкий примерчик.
Код

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

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

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