Javascript Jquery垂直滚动悬停
我有一个隐藏的溢出垂直文本滚动。这很好用。 但是，当我添加相同的div时，它不起作用。我想在同一页上运行2divJavascript Jquery垂直滚动悬停,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,我有一个隐藏的溢出垂直文本滚动。这很好用。 但是，当我添加相同的div时，它不起作用。我想在同一页上运行2div <style type="text/css"> #rollerBox {position:relative; width:336px; height:151px; padding-top:13px; border:1px solid #888; background:#eee; font-family:verdana, arial, sans-serif;} #scrol
<style type="text/css">
#rollerBox {position:relative; width:336px; height:151px; padding-top:13px; border:1px solid #888; background:#eee; font-family:verdana, arial, sans-serif;}
#scroller {width:300px; height:134px; overflow:hidden; margin:0 0 0 17px; position:relative; top:0; border:1px solid #888; background:url(scroll-list/back.gif);}
#innerContainer {position:absolute; left:0; top:0; height:75px; overflow:hidden;}
#scroller ul {margin:0; padding:0; list-style:none; width:300px;}
#scroller ul li {float:left; height:27px; width:300px;}
#scroller ul li a {display:block; float:left; height:26px; line-height:26px; width:300px; font-size:11px; color:#000; font-weight:bold; text-decoration:none; text-indent:30px; border-bottom:1px solid #ccc;}
#scroller ul li a:hover {background:#e60; color:#fff;}
#slideUp {width:302px; height:13px; position:absolute; left:17px; top:0; background:url(scroll-list/top-arrow.gif); overflow:hidden;}
#slideDown {width:302px; height:13px; position:absolute; left:17px; bottom:0; background:url(scroll-list/bottom-arrow.gif); overflow:hidden;}
</style>
<script src="http://a248.e.akamai.net/f/248/3214/1d/www.zones.com/scripts/libs/jquery-v1.7.2.js"></script>
<script type="text/javascript">
roller = function() {
total = $('#innerContainer li').length;
$totalImgs = $('#innerContainer li');
thumbHeight = 0;
for (x=0; x<total; x++) {
thumbHeight = thumbHeight + 27;
}
$('#innerContainer') .css({height: thumbHeight + 'px'});
$('#slideUp') .hover(function(e){
$('#innerContainer') .stop();
posTop = -parseInt($('#innerContainer').css("top"))
speed = (posTop) * 4;
slideTop = thumbHeight - 135;
$('#innerContainer') .animate({"top": "0px"}, speed)
},function(){
$('#innerContainer') .stop();
});
$('#slideDown') .hover(function(e){
posTop = parseInt($('#innerContainer').css("top"))
speed = (thumbHeight + posTop) * 4;
slideTop = thumbHeight - 135;
$('#innerContainer') .stop();
$('#innerContainer') .animate({"top": -slideTop + "px"}, speed)
},function(){
$('#innerContainer') .stop();
});
}
</script>
<body id="www-stunicholls-com" onload="roller()">
<div id="rollerBox">
<div id="scroller">
<ul id="innerContainer">
<li><a href="#ul">Afghanistan</a></li>
<li><a href="#ul">Akrotiri</a></li>
<li><a href="#ul">Albania</a></li>
<li><a href="#ul">Algeria</a></li>
<li><a href="#ul">American Samoa</a></li>
<li><a href="#ul">Andorra</a></li>
<li><a href="#ul">Angola</a></li>
<li><a href="#ul">Anguilla</a></li>
<li><a href="#ul">Antarctica</a></li>
<li><a href="#ul">Antigua and Barbuda</a></li>
<li><a href="#ul">Argentina</a></li>
<li><a href="#ul">Armenia</a></li>
<li><a href="#ul">Aruba</a></li>
<li><a href="#ul">Ashmore and Cartier Islands</a></li>
<li><a href="#ul">Australia</a></li>
<li><a href="#ul">Austria</a></li>
<li><a href="#ul">Azerbaijan</a></li>
<li><a href="#ul">Bahamas, The</a></li>
</ul>
</div>
<div id="slideUp">up</div>
<div id="slideDown">dwn</div>
</div>
<div id="rollerBox">
<div id="scroller">
<ul id="innerContainer">
<li><a href="#ul">Afghanistan</a></li>
<li><a href="#ul">Akrotiri</a></li>
<li><a href="#ul">Albania</a></li>
<li><a href="#ul">Algeria</a></li>
<li><a href="#ul">American Samoa</a></li>
<li><a href="#ul">Andorra</a></li>
<li><a href="#ul">Angola</a></li>
<li><a href="#ul">Anguilla</a></li>
<li><a href="#ul">Antarctica</a></li>
<li><a href="#ul">Antigua and Barbuda</a></li>
<li><a href="#ul">Argentina</a></li>
<li><a href="#ul">Armenia</a></li>
<li><a href="#ul">Aruba</a></li>
<li><a href="#ul">Ashmore and Cartier Islands</a></li>
</ul>
</div>
<div id="slideUp1">up</div>
<div id="slideDown1">dwn</div>
</div>
</body>
#滚轮盒{位置：相对；宽度：336px；高度：151px；填充顶部：13px；边框：1px实心#888；背景：#eee；字体系列：verdana、arial、无衬线；}
#滚动条{宽度：300px；高度：134px；溢出：隐藏；边距：017px；位置：相对；顶部：0；边框：1px实心#888；背景：url（滚动列表/back.gif）；}
#innerContainer{位置：绝对；左：0；顶部：0；高度：75px；溢出：隐藏；}
#滚动条ul{边距：0；填充：0；列表样式：无；宽度：300px；}
#滚动条ul li{浮动：左；高度：27px；宽度：300px；}
#滚动条ul li a{显示：块；浮动：左；高度：26px；行高：26px；宽度：300px；字体大小：11px；颜色：000；字体重量：粗体；文本装饰：无；文本缩进：30px；边框底部：1px实心#ccc；}
#滚动条ulli a：悬停{背景：#e60；颜色：#fff；}
#slideUp{宽度：302px；高度：13px；位置：绝对；左侧：17px；顶部：0；背景：url（滚动列表/top arrow.gif）；溢出：隐藏；}
#向下滑动{宽度：302px；高度：13px；位置：绝对；左侧：17px；底部：0；背景：url（滚动列表/bottom arrow.gif）；溢出：隐藏；}
滚轮=功能（）{
总计=$（'#innerContainer li'）。长度；
$totalImgs=$（“#内部容器li”）；
拇指高度=0；
对于（x=0；x）的可能副本，您应该能够使用小提琴来实现此功能。请记住，您必须在左侧菜单中启用jQuery。此处