Завершите прокрутку мыши (перетащите как, но без перетаскивания) - PullRequest
Новая
       27

Завершите прокрутку мыши (перетащите как, но без перетаскивания)

0 голосов
/ 01 февраля 2012

Я искал везде, но не смог найти ничего подходящего для меня.

Я бы хотел сделать что-то похожее на этом сайте:

http://fromtheroughmovie.com

Я посмотрел в js (800kb!), И из того, что я мог видеть, он использует scrollTo для скрытной прокрутки к элементам в зависимости от положения мыши.

Ближайший скрипт, который я смог найти, был такой: http://scripterlative.com/files/cursordivscroll.htm Но он прокручивается только тогда, когда к краям (я взломал его, чтобы попробовать с превосходным размером, но он заикается с Chrome).

Кто-нибудь знает, как сделать полную прокрутку мыши (div является 4000px большой, с 6 большими делениями позиционируются как абсолютные)Я много чего перепробовал, но пока это ни к чему не приведет.

Если нужна дополнительная информация, просто спросите.

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2012

В вашем примере кода от scripterlative вы можете настроить область прокрутки так, чтобы она была только по краям.Пример установлен на 20% границы: 

new CursorDivScroll( 'userComment', 20, 10 );

Вы можете изменить второй параметр на 50 и посмотреть, поможет ли это.

Что касается исходного сайта, вам нужно привести в порядок javascriptчтобы увидеть, как все это работает.Содержание страницы загружается через AJAX.Поиск функции runTransition (страница).Это тянет на «домашней» странице, после вступления.Этот контент содержит более полезный фрагмент javascript: http://www.fromtheroughmovie.com/js/main-home.js

Оттуда вы можете увидеть, как прокручиваются отлитые изображения: 

<div id="home-mosaic">
    <ul>
        <li id="cast-image1">...</li>
    <ul>
</div>

Кажется, что javascript выполняет тяжелую работубыть анимированным jQuery: 

$("#home-mosaic > ul > li").mouseenter(function() {
    $(this).find("div.home-mosaic-separation").animate({'width': (currentWidth*0.20) + 'px', 'left': (currentWidth*0.40) + 'px'}, 400); 
});

$("#home-mosaic > ul > li").mouseleave(function() {
    $(this).find("div.home-mosaic-separation").css({'width': (currentWidth*0.02) + 'px', 'left': (currentWidth*0.49) + 'px'});
});

Надеюсь, это поможет!

0 голосов
/ 01 февраля 2012

Вы смотрели на этот плагин?

http://demos.flesler.com/jquery/scrollTo/

Это довольно гибкий плагин с множеством функций прокрутки. Он использует функцию scrollTo, которая может быть тем, что вы видели в коде этого сайта?

...