JQuery와 내용 스크롤

http://www.filamentgroup.com/examples/slider_v2/index.php JQuery와 내용 스크롤

http://jqueryui.com/demos/slider/#side-scroll

내가

유 등 특정 태그 (느린, 메드로 밀어 함께 두 가져올 수있는 방법, 당신은 기본적으로 특정 상자로 이동 여기에 해당하는

는 예를 필요

드롭 다운을 신경 쓰지

출처

2011-05-10 jayjay

데모에서 스크립트 (보기 코드)를 볼 수 있습니까 http://jqueryui.com/demos/slider/#side-scroll? 내가 시도

$(function() { 
     var scrollPane = $(".scroll-pane"), 
      scrollContent = $(".scroll-content"); 
     var scrollbar = $(".scroll-bar").slider({ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50, 
      slide: function(event, ui) { 
       if (scrollContent.width() > scrollPane.width()) { 
        scrollContent.css("margin-left", Math.round(
         ui.value/100 * (scrollPane.width() - scrollContent.width()) 
        ) + "px"); 
       } else { 
        scrollContent.css("margin-left", 0); 
       } 
      } 
     }); 
    });

그것은 작품의 :에

은 단지 변경 스크립트에 저 작은 수정을합니다. 그럼 그냥 me..can U HTTP를위한 당신의 필요를 위해

출처

2011-05-10 17:52:30 bungdito

흠 해달라고 작업을 터치 마무리합니다 // 그것을 jsbin 또는 JS 바이올린 – jayjay

그것은 ... 나를 위해 bungdito 어떤 일을 해달라고? – jayjay

먼저 http://jqueryui.com/demos/slider/#side-scroll에서 같이 만들려고하십시오. 거기에 모든 코드를 복사하고 시도하십시오 (jquery.js, jquery-ui.js 및 jquery-ui.css를 호출하는 것을 잊지 마십시오) 그런 다음 모든 스크립트를 변경하여 위의 코드로 스크롤러를 초기화하십시오 – bungdito

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title></title> 
     <script type="text/javascript" src="2_files/jquery.js"></script> 
     <script type="text/javascript" src="2_files/jquery-ui.js"></script> 
     <link href="2_files/jquery-ui.css" type="text/css" rel="Stylesheet"> 

    <style> 
    #demo-frame > div.demo { padding: 10px !important; } 
    .scroll-pane { overflow: auto; width: 99%; float:left; } 
    .scroll-content { width: 2440px; float: left; } 
    .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } 
    * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */ 
    .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } 
    .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } 
    .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } 
    .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } 
    .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } 
    </style> 

</head> 
<body> 
     <script> 
    $(function() { 
     var scrollPane = $(".scroll-pane"), 
     var scrollContent = $(".scroll-content"); 
     var scrollbar = $(".scroll-bar").slider({ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50, 
      slide: function(event, ui) { 
       if (scrollContent.width() > scrollPane.width()) { 
        scrollContent.css("margin-left", Math.round(
         ui.value/100 * (scrollPane.width() - scrollContent.width()) 
        ) + "px"); 
       } else { 
        scrollContent.css("margin-left", 0); 
       } 
      } 
     }); 
    }); 

     //append icon to handle 
     var handleHelper = scrollbar.find(".ui-slider-handle") 
     .mousedown(function() { 
      scrollbar.width(handleHelper.width()); 
     }) 
     .mouseup(function() { 
      scrollbar.width("100%"); 
     }) 
     .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>") 
     .wrap("<div class='ui-handle-helper-parent'></div>").parent(); 

     //change overflow to hidden now that slider handles the scrolling 
     scrollPane.css("overflow", "hidden"); 

     //size scrollbar and handle proportionally to scroll distance 
     function sizeScrollbar() { 
      var remainder = scrollContent.width() - scrollPane.width(); 
      var proportion = remainder/scrollContent.width(); 
      var handleSize = scrollPane.width() - (proportion * scrollPane.width()); 
      scrollbar.find(".ui-slider-handle").css({ 
       width: handleSize, 
       "margin-left": -handleSize/2 
      }); 
      handleHelper.width("").width(scrollbar.width() - handleSize); 
     } 

     //reset slider value based on scroll content position 
     function resetValue() { 
      var remainder = scrollPane.width() - scrollContent.width(); 
      var leftVal = scrollContent.css("margin-left") === "auto" ? 0 : 
       parseInt(scrollContent.css("margin-left")); 
      var percentage = Math.round(leftVal/remainder * 100); 
      scrollbar.slider("value", percentage); 
     } 

     //if the slider is 100% and window gets larger, reveal content 
     function reflowContent() { 
       var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left"), 10); 
       var gap = scrollPane.width() - showing; 
       if (gap > 0) { 
        scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10) + gap); 
       } 
     } 

     //change handle position on window resize 
     $(window).resize(function() { 
      resetValue(); 
      sizeScrollbar(); 
      reflowContent(); 
     }); 
     //init scrollbar size 
     setTimeout(sizeScrollbar, 10);//safari wants a timeout 
    }); 
    </script> 



<div class="demo"> 

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 
    <div class="scroll-content"> 
     <div class="scroll-content-item ui-widget-header">1</div> 
     <div class="scroll-content-item ui-widget-header">2</div> 
     <div class="scroll-content-item ui-widget-header">3</div> 
     <div class="scroll-content-item ui-widget-header">4</div> 
     <div class="scroll-content-item ui-widget-header">5</div> 
     <div class="scroll-content-item ui-widget-header">6</div> 
     <div class="scroll-content-item ui-widget-header">7</div> 
     <div class="scroll-content-item ui-widget-header">8</div> 
     <div class="scroll-content-item ui-widget-header">9</div> 
     <div class="scroll-content-item ui-widget-header">10</div> 
     <div class="scroll-content-item ui-widget-header">11</div> 
     <div class="scroll-content-item ui-widget-header">12</div> 
     <div class="scroll-content-item ui-widget-header">13</div> 
     <div class="scroll-content-item ui-widget-header">14</div> 
     <div class="scroll-content-item ui-widget-header">15</div> 
     <div class="scroll-content-item ui-widget-header">16</div> 
     <div class="scroll-content-item ui-widget-header">17</div> 
     <div class="scroll-content-item ui-widget-header">18</div> 
     <div class="scroll-content-item ui-widget-header">19</div> 
     <div class="scroll-content-item ui-widget-header">20</div> 
    </div> 
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 
     <div class="scroll-bar"></div> 
    </div> 
</div> 

</div><!-- End demo --> 



<div class="demo-description"> 
<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p> 
</div><!-- End demo-description --> 
</body></html>

출처

2011-05-11 18:32:12 jayjay

시도했습니다. 위의,하지만 여전히 작동하지 않는 것 같습니다. – jayjay

JQuery UI 웹 사이트에서 직접 가져온 것입니다. –

JQuery와 내용 스크롤

답변

관련 문제