jquery slider вертикально не работает

привет, я сделал вертикальный слайдер, используя jquery, чтобы сдвинуть текст по вертикали. Текст перемещается вверх и вниз, когда ручка ползунка перемещается, но сам дескриптор не перемещается ... я не знаю, что там происходит?jquery slider вертикально не работает

Пожалуйста, помогите мне!

Вот код:

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 slider вертикально не работает

ответ

Смежные вопросы