Question

我目前正致力于创建一个垂直卷轴并且到目前为止已经陷入了一些功能

我的HTML看起来像这样

<div class="outer">

    <div class="slider-content clearfix">
        <ul>
        <li><img src="images/img1.jpg" width="200" height="200" alt="img1"></li>
        <li><img src="images/img2.jpg" width="210" height="200" alt="img2"></li>
        <li><img src="images/img3.jpg" width="220" height="210" alt="img3"></li>
        <li><img src="images/img4.jpg" width="210" height="200" alt="img4"></li>
        <li><img src="images/img5.jpg" width="200" height="200" alt="img5"></li>
        <li><img src="images/img6.jpg" width="210" height="200" alt="img6"></li>
        <li><img src="images/img7.jpg" width="220" height="153" alt="img7"></li>
        <li><img src="images/img8.jpg" width="200" height="200" alt="img8"l></li>
        <li><img src="images/img9.jpg" width="200" height="200" alt="img9"></li>
        <li><img src="images/img10.jpg" width="200" height="200" alt="img10"></li>
        <li><img src="images/img11.jpg" width="200" height="200" alt="img11"></li>
        <li><img src="images/img12.jpg" width="200" height="200" alt="img12"></li>
        <li><img src="images/img13.jpg" width="220" height="210" alt="img13"></li>
        </ul>
    </div>

</div>

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

我的CSS如下

*{margin:0px;padding:0px;}
 li{list-style:none;float:left;height:200px;width:200px;}
.clearfix { overflow: hidden; display: inline-block; }
.clearfix { display: block; }
.outer{margin:45px auto;position:relative;height:500px;width:515px;border:1px solid  #333;overflow:hidden;}
.slider-content{position:absolute;top:0px;left:0px;}
.top-hover, .bottom-hover{width:515px;height:50px;background:#ccc;}
.top-hover{position:absolute;top:0px;z-index:500;}
.bottom-hover{position:absolute;bottom:0px;}

最后我的js

$(function(){

$('.outer').prepend('<div class="top-hover"></div>');
$('.slider-content').after('<div class="bottom-hover"></div>'); 

//Get height of outer container and slider
var outerHeight = $('div.outer').height();
var contentHeight = $('div.slider-content').height();
// Calculate cut off point of displayed contents
var contentExcess = contentHeight - outerHeight;
//store end point of scroll
var maxTopScroll = 0 - contentExcess
var speed = 45;
var hovered = false;


//Hover over top div
$('div.top-hover').hover(
function(){

    //Get the position of the slider content div and store in sliderPositionTop
    var sliderPositionTop = $('.slider-content').position().top;
    // if slider position is less than 0 animate down
    if(sliderPositionTop < 0){
         // alert(sliderPositionTop);
        $('.slider-content').animate({
            top: sliderPositionTop + speed
        });

    } else {
        //If slider is greater than 0 stop animation
            if(sliderPositionTop > 0){
                $('div.top-hover').stop();
                $('.slider-content').css('top', '0px');
            }
         alert('No movement');
    }   
},
function(){
    return false;
  });




 //Hover over bottom div
 $('div.bottom-hover').hover(
function(){
    //Get the position of the slider content div and store in    sliderPositionBottom
    var sliderPositionBottom = $('.slider-content').position().top;
    // If slider is less / equal to 0 then animate slider
        if(sliderPositionBottom <= 0){
             // alert(sliderPositionBottom);
            $('.slider-content').animate({
                top: sliderPositionBottom - speed   
            }); 
        } else {
            //If scroll reaches max then stop
             alert('No movement');
        }
},
function(){
    return false;
}
  );

  });

当您将鼠标悬停在顶部和底部按钮上时，滚动条会上下移动，但是您必须继续移入和移出悬停区域以使滚动条移动

我的问题是你怎么能这样做才能连续滚动滚动内容div

目前脚本也无法限制scroll-content div的结束，一旦它到达div的底部，我似乎无法停止它

任何想法都很感激

干杯

Answer 1

我认为jquery jScrollPane插件正是您正在寻找的。它很容易用css皮肤，并有很多例子。

jScrollPane - 箭头悬停示例 http://jscrollpane.kelvinluck.com/arrow_hover.html

Jquery垂直内容滚动条

1 个答案: