Question

我想在鼠标悬停在该照片上时滚动照片。我有一个代码，但我不知道如何做到这一点。请帮帮我。

This is my jquery code,

            $('.arrow').on('click', function(){
            var gallery = $('#image_container');
             var height = gallery.height();
            var up = $(this).is('.up_arrow');

            if (up) {
                gallery.animate({'scrollTop': '-=' + height});
              } else {
                  gallery.animate({'scrollTop': '+=' + height});        
             }
            });


and html is listed below,
<div class="arrow up_arrow"><img src="images/icons/circle.gif"></div>
            <div id="image_container" > 
                <p id="text_header" > Back to Green</p> 
                 <img src="images/wallpapers_scroll/1.jpg" />
                  <img src="images/wallpapers_scroll/2.jpg" />


            </div>
            <div class="arrow down_arrow"><img src="images/icons/circle.gif"></div>
The #image_container contains the photos

Answer 1

尝试使用marginTop代替scrollTop。此外，您需要在滚动高度后添加px。

$('.arrow').on('click', function(){
  var gallery = $('#image_container');
  var height = gallery.height();
  var up = $(this).is('.up_arrow');

  if (up) {
    gallery.animate({'marginTop': '-=' + height+'px'},700);
  } else {
    gallery.animate({'marginTop': '+=' + height+'px'});
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="arrow up_arrow"><img src="http://placekitten.com/40/40"></div>

<div id="image_container" > 
  <p id="text_header" > Back to Green</p>   
  <img src="http://placekitten.com/300/400" />
  <img src="http://placekitten.com/300/398" />
</div>
<div class="arrow down_arrow"><img src="http://placekitten.com/40/40"></div>

JQuery Scroll当onmousever时我的形象

1 个答案: