完整的鼠標滾動（拖動滾動像但沒有拖動）

我到處搜索，但無法找到任何適合我的東西。完整的鼠標滾動（拖動滾動像但沒有拖動）

我願做這樣的事情在這個網站：

http://fromtheroughmovie.com

我已經研究過的JS，從我能看到，它使用scrollTo悄悄滾動朝（800KB！）元素取決於鼠標的位置。

我能找到的最接近的腳本是這樣的：http://scripterlative.com/files/cursordivscroll.htm 但它只能在邊緣滾動（我試圖用優秀的尺寸嘗試，但與Chrome結合）時滾動。

有誰知道如何做一個完整的鼠標滾動（div是4000px大，有6個大divs定位爲絕對）？我嘗試了很多東西，但現在沒有辦法。

如果需要更多信息，請詢問。

在此先感謝。

來源

2012-02-01 Tychoblood

你看過這個插件嗎？

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

這是一個非常適用的插件有很多滾動功能的。它使用了一個名爲'scrollTo'的函數，這可能是你在該網站的代碼中看到的？

來源

2012-02-01 11:28:29 Jon

是的，我看着它，並嘗試，但事實是，我似乎無法將它與鼠標的位置和運動（數學等這麼糟糕...）。 – Tychoblood 2012-02-01 11:54:43

在來自scripterlative的示例代碼中，您可以將滾動區域調整爲僅來自邊緣。該示例設置爲20％邊界：

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

您可以更改第二個參數爲50，看看是否有幫助。

至於原來的網站，你需要整理的JavaScript來看看它是如何工作的。頁面內容通過AJAX加載。搜索函數runTransition（page）。在介紹之後，這會拉入「主頁」頁面。此內容包含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'}); 
});

希望有幫助！

來源

2012-02-01 12:04:44

完整的鼠標滾動（拖動滾動像但沒有拖動）

回答

相關問題