Question

我有一个隐藏的溢出垂直文本滚动。哪个工作正常。但是当我添加相同的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;}
#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>

我试图制作小提琴，但我无法让它在那里跑。我道歉。需要帮助。

悬停时Jquery Vertical Scroll

0 个答案: