2010-03-04 102 views
4

您好我已經做了一個垂直滑塊使用jquery垂直滑動文本。當滑動手柄移動但手柄本身沒有移動時,文本會上下移動...我不知道那裏發生了什麼?jquery滑塊垂直不起作用

請有人幫助我!

下面是代碼:

JS:

$(document).ready(function(){ 
    $("#content-slider").slider({ 
    animate: true, 
     orientation: "vertical", 
     value: 100, 
    change: handleSliderChange, 
    slide: handleSliderSlide 
    }); 

}); 

function handleSliderChange(e, ui) 
{ 
    var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
("#content-scroll").height(); 
    $("#content-scroll").animate({scrollTop: ui.value * (maxScroll/
100) }, 1000); 

} 

function handleSliderSlide(e, ui) 
{ 
    var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
("#content-scroll").height(); 
    $("#content-scroll").attr({scrollTop: ui.value * (maxScroll/
100) }); 
} 

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script> 
    <script src="jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script> 
    <script src="slider_test.js" language="javascript" type="text/javascript"></script> 
    <style> 
    #main { 
     width: 510px; 
     margin: 0 auto; 
    } 

    #content-slider { 
     width:4px; 
     height:510px; 
     margin: 5px;float:left; 
     background: #BBBBBB; 

    } 

    .ui-slider-handle { 
     float:left; 
     height:10px;width:10px; 
     background-color:#03F; 
} 

    #content-scroll { 
     width: 500px; 
     height: 500px; 
     margin-top: 10px; 
     overflow: hidden; 
     border: solid 1px black; 
    float:left; 
    } 

    #content-holder { 
     width: 800px; 
     height: 270px; 
    } 

    .content-item { 
     width: 490px; 
     height: 270px; 
     padding: 5px; 
     float: left; 
    margin:auto 0 0 100px; 
    } 
    </style> 
</head> 
<body> 
<div id="content-slider"></div> 
<div id="content-scroll"> 
    <div id="content-holder"> 
    <div class="content-item"> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
     <p>Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.</p> 
     <p>Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.</p> 
    </div> 
    </div> 


    </div> 
</div> 
</body> 
</html> 

回答

1

這應該做的伎倆:

$(document).ready(function(){ 
     $("#content-slider").slider({ 
     animate: true, 
      orientation: "vertical", 
      value: 0, 
      range: "max", 
      min: -100, 
      max: 0, 
     change: handleSliderChange, 
     slide: handleSliderSlide 
     }); 

    }); 

    function handleSliderChange(e, ui) 
    { 
     var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
    ("#content-scroll").height(); 
     $("#content-scroll").animate({scrollTop: ui.value * (maxScroll/
    -100) }, 1000); 

    } 

    function handleSliderSlide(e, ui) 
    { 
     var maxScroll = $("#content-scroll").attr("scrollHeight") - $ 
    ("#content-scroll").height(); 
     $("#content-scroll").attr({scrollTop: ui.value * (maxScroll/
    -100) }); 
    }