0

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

我正在尝试根据鼠标所在的位置创建图像滚动。从逻辑上讲,我希望图像从左侧或右侧添加或减去,并像这样设置动画。此外,我希望图像在离开每个输入的空间后停止。

查询

$(".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 技能非常有限。

4

1 回答 1

0

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

于 2013-03-13T22:49:11.287 回答