Question

我到处搜索但找不到适合我的东西。

我想在这个网站上做点什么：

http://fromtheroughmovie.com

我查看了js（800kb！），从我所看到的，它使用scrollTo根据鼠标位置悄悄地滚动元素。

我能找到的最接近的脚本是：http://scripterlative.com/files/cursordivscroll.htm 但它只是在朝向边缘时滚动（我将其破解为尝试使用优质尺寸，但它与Chrome结合使用）。

有没有人知道如何做一个完整的鼠标滚动（div是4000px大，6个大div被定位为绝对）？我尝试了很多东西，但现在却无处可去。

如果需要更多信息，请询问。

提前致谢。

Answer 1

你看过这个插件吗？

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

这是一个非常适应性强的插件，具有许多滚动功能。它使用了一个名为'scrollTo'的函数，这可能是你在该网站的代码中看到的吗？

Answer 2

在来自scripterlative的示例代码中，您可以将滚动区域调整为仅在边缘附近。示例设置为20％边界：

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

您可以将第二个参数更改为50，看看是否有帮助。

至于原始网站，你需要整理javascript，看看它是如何工作的。页面内容通过AJAX加载。搜索函数runTransition（页面）。这拉动了家庭＆＃39;页面，介绍后。此内容包含更有用的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'});
});

希望有所帮助！

完成鼠标滚动（拖动滚动，但没有拖动）

2 个答案: