两个div - 每个都在同一页面上有滚动条？

http://jquerytools.org/demos/rangeinput/scrollbar.htm

我怎么会在同一页上把其中两个（每个都有自己的控制）？

2012-08-25 GVV

我猜你会通过唯一的ID（这始终是唯一的）每个滚动做这样的事情：

<head> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://jquerytools.org/media/css/standalone.css"/> 
</head> 
<body> 

<!-- our first scrollable element --> 
<div id="scrollwrap"> 
    <div id="scroll"> 
    This is the first slider on the same page !!! 
    </div> 
</div> 

<!-- rangeinput that controls the scroll --> 
<input type="range" max="2600" step="10" id="range"/> 

<br><br> 

<!-- our next scrollable element --> 
<div id="scrollwrap2"> 
    <div id="scroll2"> 
    This is the second slider on the same page !!! 
    </div> 
</div> 

<!-- rangeinput that controls the scroll --> 
<input type="range" max="2600" step="10" id="range2" /> 

<script> 
var scroll = $("#scroll"); 
$("#range").rangeinput({ 
    onSlide: function(ev, step) { 
     scroll.css({left: -step}); 
    }, 
    progress: true, 
    value: 100, 
    change: function(e, i) { 
     scroll.animate({left: -i}, "fast"); 
    }, 
    speed: 0 
}); 

var scroll2 = $("#scroll2"); 
$("#range2").rangeinput({ 
    onSlide: function(ev, step) { 
     scroll2.css({left: -step}); 
    }, 
    progress: true, 
    value: 100, 
    change: function(e, i) { 
     scroll2.animate({left: -i}, "fast"); 
    }, 
    speed: 0 
}); 
</script> 
</body> 
</html>

FIDDLE

来源

2012-08-25 11:10:02 adeneo

这是完美的。 'scroll2'是我做错了。非常感谢！ – GVV

您需要为每个滚动器使用唯一的ID。 –

两个div - 每个都在同一页面上有滚动条？

回答

相关问题