jquery滑块垂直不起作用

您好我已经做了一个垂直滑块使用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>

来源

2010-03-04 samar

这应该做的伎俩：

$(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) }); 
    }

来源

2010-03-05 00:25:48 ssergei

jquery滑块垂直不起作用

回答

相关问题