完整的鼠标滚动（拖动滚动像但没有拖动）

我到处搜索，但无法找到任何适合我的东西。完整的鼠标滚动（拖动滚动像但没有拖动）

我愿做这样的事情在这个网站：

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

完整的鼠标滚动（拖动滚动像但没有拖动）

回答

相关问题