0

http://jsfiddle.net/Pjp9x/6/ 問題: サイトに非常に幅の広い画像があります。タイムラインなので、横スクロールで表示するのに最適な方法だと思います。ビューポートと、ビューポート内に 2 つのボタンを作成しました。

マウスの位置に基づいて画像のスクロールを作成しようとしています。論理的には、画像を左または右から加算または減算して、そのようにアニメーション化することを望みます。また、入力された各スペースを離れた後に画像が停止するようにします。

Jクエリ

$(".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 に答える