Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.01.2010, 16:21
жажду знаний
Отправить личное сообщение для bushstas Посмотреть профиль Найти все сообщения от bushstas
 
Регистрация: 17.07.2009
Сообщений: 202

скроллер для картинок(посмотрите люди)
написал своими силами скроллера для прокрутки изображений
не использующий колесико, может кому пригодится, все вроде более менее просто и тупо
<?php
$w=90; //ширина элементов для скроллинга (у меня картинки)
$h=90; //высота  элементов для скроллинга (у меня картинки)
$q=5;  //видимое количество элементов в скроллере
$qq=8; // общее количество элементов
$scroller_width=$w*$q; // ширина скроллера
?>

-----------------------------------------------------------------------
// html код скроллера
-----------------------------------------------------------------------
при наведении курсора определяем координату Х скроллера +
передаем необходимые параметры для вычислений
запускаем скроллер
определяем направление и скорость скроллинга
при потере фокуса мышью останавливаем скроллинг
фоном должна быть 100% прозрачная png иначе в IE не работает

<div id="scroller_container" onmouseover="find_out_coordinates('scroller_container',<?=$w?>,<?=$scroller_width?>,<?=$qq?>),start_scrollin()" onmousemove="scroller_cursor_position(event)" onmouseout="stop_scrolling()" style="position:absolute;z-index:101;left:200px;width:<?=$scroller_width?>px;height:<?=$h?>px;border:1px solid #000;overflow:hidden;background-image : url(../images/back.png);  background-repeat : repeat;"></div>

<div style="position:absolute;z-index:100;left:200px;width:<?=$scroller_width?>px;height:<?=$h?>px;overflow:hidden;">

// сами элементы для скроллинга
<div style="width:<?=$w*$qq;?>;" id="scroller">
<img  src="1.jpg" >
<img  src="2.jpg" >
<img  src="3.jpg" >
<img  src="4.jpg" >
<img  src="5.jpg" >
<img  src="6.jpg" >
<img  src="7.jpg" >
<img  src="8.jpg" >
</div>
</div>

-------------------------------------------------------------------
// java скрипты
-------------------------------------------------------------------
// определяем координаты скроллера
// получаем необходимые параметры

function find_out_coordinates(elemId,ew,sw,eq)
{var elem = document.getElementById(elemId);

    l = 0;
    while (elem)
    {
        l += elem.offsetLeft;
        elem = elem.offsetParent;
    }

    scroller_left=l;
    elem_width=ew
    scroller_width=sw
    elem_quantity=eq	

// определяем центр скроллера который есть отсчет скорости скроллинга
    scroller_center =scroller_width/2

// определяем конец элементов скроллинга
very_end=(elem_width*elem_quantity)-scroller_width;
}
//--------------------------------------------
// вычисляем направление и скорость скроллинга

function scroller_cursor_position(event){
xpos=event.clientX
xpos=xpos-scroller_left
xpos=xpos-scroller_center;
xpos=xpos*-1;

// далее определяем скорость 

acceleration=xpos/100; // заменив 100 на другое число можно
                                // регулировать скорость
}

//------------------------------------

function start_scrolling(){
ww=window.setInterval('scrolling()',10);
}

function stop_scrolling(){
window.clearInterval(ww);
}

function scrolling(){

// проверяем достигнут ли конец или начало в зависимости от направления, если нет то крутим
if(((y*-1<=very_end) && acceleration<0) || ((y<3) && acceleration>0)) {

// далее намудрил с приростом

yy=yy+acceleration
y=yy*2
document.getElementById("scroller").style.marginLeft=+y;
}
}

ну вот у меня работало и в Opera и в Mozilla и в IE7 (с прозрачной картинкой фона)

может не особо рационально зато сам и более менее понятно начинающим как я сам

другие же лишний раз удостоверятся что они не так уж и плохи в этом

если кому то поможет буду рад
буду рад замечаниям и исправлениям

Последний раз редактировалось bushstas, 11.01.2010 в 17:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
нужна программа для этого. Чем писать? javascript или php? spam-server Серверные языки и технологии 3 27.08.2009 00:52
Загрузить title для ссылок на странице MarikVal jQuery 0 27.07.2009 20:38
Переодическое обновление значений для графика, функция для обновления значений yupa87 Общие вопросы Javascript 0 09.07.2009 14:48