Question

http://jsfiddle.net/Pjp9x/6/ 问题：我在网站上有一个巨大的宽度图像。由于这是一个时间轴，我觉得展示它的好方法是水平滚动。我在视口内创建了一个视口和两个按钮。

我正在尝试根据鼠标的位置创建一个图像滚动。从逻辑上讲，我希望图像能够从左或右加上或减去并以此为动画。此外，我希望在离开每个进入的空间后图像停止。

JQUERY

$(".move_right").on({
      mouseenter: function(){
        $('.image').animate({right:'-100px'},"fast");

      }
});

$(".move_left").on({
      mouseenter: function(){
        $('.image').animate({left:'-100px'},"fast");

      }
});

HTML

<div class="container">
     <div class="move_left"></div>
     <div class="move_right"></div>
     <img class="image" src="http://img3.etsystatic.com/008/0/6026325/il_fullxfull.365768623_qlyl.jpg" />
</div>

CSS

.container{
 height:100%;
 width:100%;
 overflow:hidden;
 position:relative;
}
.image{
  position:relative;   

}
.move_left{
    position:absolute;
    bottom:0;
    right:0;
    width:10%; 
    background:red;
    z-index:5;
    height:100%;
}
.move_right{
    position:absolute;
    bottom:0;
    left:0;
    width:10%;
    background:red;
    z-index:5;
    height:100%
}

我的jquery技能非常有限。

Answer 1

我认为您正在尝试重新发明轮子，为什么不使用此插件：http://www.smoothdivscroll.com/#quickdemo

基于.on（）。mouseenter（）为图像的位置设置动画

1 个答案: