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 技能非常有限。