Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

скроллер для картинок(мой пример)

56K
10 января 2010 года
bushstas
1 / / 10.01.2010
написал своими силами скроллер для прокрутки изображений
не использующий колесико, без всяких скроллбаров
может кому пригодится, все вроде более менее просто и тупо

<?php
$w=90; //ширина элементов для скроллинга (у меня картинки)
$h=90; //высота элементов для скроллинга (у меня картинки)
$q=5; //видимое количество элементов в скроллере
$qq=8; // общее количество элементов
$scroller_width=$w*$q; // ширина скроллера
?>
-----------------------------------------------------------------------
// html код скроллера
-----------------------------------------------------------------------
<div id="scroller_container"

//при наведении курсора определяем координату Х скроллера +
//передаем необходимые параметры для вычислений
//запускаем скроллер

onmouseover="find_out_coordinates('scroller_contai ner',<?=$w?>,<?=$scroller_width?>,<?=$qq?>),start_ scrolling()"

// определяем направление и скорость скроллинга
onmousemove="scroller_cursor_position(event)"

// при потере фокуса мышью останавливаем скроллинг
onmouseout="stop_scrolling()"


// фоном должна быть 100% прозрачная png иначе в IE не работает

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.marginLe ft=+y;
}
}

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

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

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

если кому то поможет буду рад
буду рад замечаниям и исправлениям
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог