Fatal编程技术网
  • jquery/
  • jquery滑块垂直方向不工作

jquery滑块垂直方向不工作

jquery user-interface

jquery滑块垂直方向不工作,jquery,user-interface,Jquery,User Interface,您好，我已经使用jquery制作了一个垂直滑块来垂直滑动文本。当滑块的控制柄移动时，文本会上下移动，但控制柄本身不会移动。。。我不知道外面发生了什么 请有人帮帮我 代码如下： JS: $(document).ready(function(){ $("#content-slider").slider({ animate: true, orientation: "vertical", value: 100, change: handleSlider

您好，我已经使用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) }); 
}

<!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>
HTML:

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

<!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>


#主要{
宽度：510px；
保证金：0自动；
}
#内容滑块{
宽度：4px；
高度：510px；
边距：5px；浮动：左侧；
背景:#BBBBBB；
}
.ui滑块句柄{
浮动：左；
高度：10px；宽度：10px；
背景色：#03F；
}
#内容卷轴{
宽度：500px；
高度：500px；
边缘顶部：10px；
溢出：隐藏；
边框：实心1px黑色；
浮动：左；
}
#内容持有者{
宽度：800px；
高度：270px；
}
.内容项{
宽度：490px；
高度：270px；
填充物：5px；
浮动：左；
保证金：自动0 100像素；
}
同侧阴唇，弓形头，无胎盘，胎动。马蒂斯和德莱克特斯，纳拉姆·克拉斯和福西布斯·乌尔特里斯。修女精英，泰勒斯放纵爱欲。利奥·维西，勒库斯·普雷蒂姆。普拉塔·阿库，在纳托克语中为非，同侧语为eu vivamus

只是口口声声，阿利奎姆·梅特斯。自由女神维瓦摩斯，猫咪阿提亚姆。Eu非夏季前庭，类别除外。乌尔纳。Phasellus ac lacus，坐在eu massa。皮前帆。Rem ac门

同侧阴唇，弓形头，无胎盘，胎动。马蒂斯和德莱克特斯，纳拉姆·克拉斯和福西布斯·乌尔特里斯。修女精英，泰勒斯放纵爱欲。利奥·维西，勒库斯·普雷蒂姆。普拉塔·阿库，在纳托克语中为非，同侧语为eu vivamus

只是口口声声，阿利奎姆·梅特斯。自由女神维瓦摩斯，猫咪阿提亚姆。Eu非夏季前庭，类别除外。乌尔纳。Phasellus ac lacus，坐在eu massa。皮前帆。Rem ac门

同侧阴唇，弓形头，无胎盘，胎动。马蒂斯和德莱克特斯，纳拉姆·克拉斯和福西布斯·乌尔特里斯。修女精英，泰勒斯放纵爱欲。利奥·维西，勒库斯·普雷蒂姆。普拉塔·阿库，在纳托克语中为非，同侧语为eu vivamus

只是口口声声，阿利奎姆·梅特斯。自由女神维瓦摩斯，猫咪阿提亚姆。Eu非夏季前庭，类别除外。乌尔纳。Phasellus ac lacus，坐在eu massa。皮前帆。Rem ac门

同侧阴唇，弓形头，无胎盘，胎动。马蒂斯和德莱克特斯，纳拉姆·克拉斯和福西布斯·乌尔特里斯。修女精英，泰勒斯放纵爱欲。利奥·维西，勒库斯·普雷蒂姆。普拉塔·阿库，在纳托克语中为非，同侧语为eu vivamus

只是口口声声，阿利奎姆·梅特斯。自由女神维瓦摩斯，猫咪阿提亚姆。Eu非夏季前庭，类别除外。乌尔纳。Phasellus ac lacus，坐在eu massa。皮前帆。Rem ac门

同侧阴唇，弓形头，无胎盘，胎动。马蒂斯和德莱克特斯，纳拉姆·克拉斯和福西布斯·乌尔特里斯。修女精英，泰勒斯放纵爱欲。利奥·维西，勒库斯·普雷蒂姆。普拉塔·阿库，在纳托克语中为非，同侧语为eu vivamus

只是口口声声，阿利奎姆·梅特斯。自由女神维瓦摩斯，猫咪阿提亚姆。Eu非夏季前庭，类别除外。乌尔纳。Phasellus ac lacus，坐在eu massa。皮前帆。Rem ac门

同侧阴唇，弓形头，无胎盘，胎动。马蒂斯和德莱克特斯，纳拉姆·克拉斯和福西布斯·乌尔特里斯。修女精英，泰勒斯放纵爱欲。利奥·维西，勒库斯·普雷蒂姆。普拉塔·阿库，在纳托克语中为非，同侧语为eu vivamus

只是口口声声，阿利奎姆·梅特斯。自由女神维瓦摩斯，猫咪阿提亚姆。Eu非夏季前庭，类别除外。乌尔纳。Phasellus ac lacus，坐在eu massa。皮前帆。Rem ac门
这应该可以做到：

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