代码之家 › 专栏 › 技术社区 › Aximili

jQuery移动并加速到未知距离的方向(平滑滚动)

smooth-scrolling jquery

0

Aximili · 技术社区 · 14 年前

<img id="leftArrow"/>
<div style="overflow:hidden; width:300px">
  <img id="wideImage" style="width:1000px; position:absolute; left:0"/>
</div>
<img id="rightArrow"/>

结果会是这样

_{(来源:

aximili at home.exetel.com.au

)}

我想要这样的东西

$('#right').hover(function() {
  //On hover, accelerate #wideImage to the left
}, function() {
  //On mouse out, decelerate to stop
});

提前谢谢!

3 回复 | 直到 5 年前

1

Nicolo' Verrini 14 年前

也许你该看看@ this

2

0

Aximili 14 年前

就这样

$('#right').hover(function() {
  $('#wideImage').animate({ left: '-=50' }, 250, 'easeInQuad', function () {
    $('#wideImage').animate({ left: '-=600' }, 250, 'linear', function () {
      $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad');
    });
  });
}, function() {
  $('#wideImage').stop();
  $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad');
});

3

0

Mottie 14 年前

这里是 nice tutorial 这基本上和你想做的事情是一样的(也自动地)

编辑:哦,你的屏幕截图有点让我发火了,我以为你想滚动浏览多个图像,但现在我看到你想平移一个非常宽的图像?

a demo 回答另一个问题,但我更新了它,这样你就可以只悬停在按钮上的动画图像。我希望这更像你想要的。

推荐文章

user5056761 · HTML5画布滚动延迟

7 年前

Forivin · 缓慢地永久向下滚动页面,而不会占用大量CPU或延迟滚动

7 年前

Julian · Smoothscroll不适用于chrome,但适用于其他浏览器

7 年前

user1715848 · jQuery单击链接时从页面顶部滚动x个像素

12 年前

reticent · dotnet WebBrowser控件中的脚本运行速度较慢

12 年前