jQuery Slider不拾取元素上線break

嗨，我有一個基本的jQuery滑塊，我有一些年，我想用我的箭頭滑過。首先，我想要隱藏任何溢出，這是不正常的，因爲我需要它。jQuery Slider不拾取元素上線break

我希望overflow:hidden在我的<ul class="yearslist">上可以隱藏進入下一行的溢出，但這似乎不起作用，而其他li元素如下所示。

無論如何，當滑塊從左向右移動時，它不會顯示最上面一行的最後一行的年份。

想讓這項工作完美無缺！

我創建了一個簡單的jsFiddle或查看下面我的代碼：

的index.html

<div class="sixteen columns" id="years"> 
     <div id="years_arrows"> 
      <span class="nav_arrows" id="NavigateBackward"><img src="http://www.designofsignage.com/application/symbol/building/image/600x600/arrow-left-circle.jpg"/></span> 
     <span class="nav_arrows aaa" id="NavigateForward"><img src="http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg" /></span> 
     <div id="slider"> 
     <div id="yearslistwrapper"> 
       <ul class="yearslist"> 
        <li><a href="#">2003</a></li> 
        <li><a href="#">2004</a></li> 
        <li><a href="#">2004</a></li> 
        <li><a href="#">2005</a></li> 
        <li><a href="#">2006</a></li> 
        <li><a href="#">2007</a></li> 
        <li><a href="#">2008</a></li> 
        <li><a href="#">2009</a></li> 
        <li><a href="#">2010</a></li> 
        <li><a href="#">2011</a></li> 
        <li><a href="#">2012</a></li>      
        <li><a href="#">2013</a></li> 
       </ul> <!-- END UL yearslist --> 
      </div> <!--End slider--> 

          </div> <!-- End years_arrows div -->

的style.css

#years { 
    background-color:#CCC; 
    height:50px; 
    word-spacing:100px; 
} 

#yearslistwrapper, .yearslist { 
    padding-top:10px; 
    overflow:hidden; 
} 

.yearslist { 
    overflow:hidden; 
    display:inline; 
} 

.yearslist li { 
display:inline; 
} 
} 

.yearslist a { 
    color:#000; 
    text-decoration:none; 
    cursor:pointer; 
    font-size:20px; 
    font-weight:bold; 
} 

.yearslist a:hover { 
    text-decoration:underline; 
} 

/** BG For Span on Nav Arrows **/ 
.nav_arrows { 
    height:100%; 
    max-width:5%; 
} 

#years_arrows { 
    width:100%; 
    height:100%; 
} 

#years_arrows img { 
    width:50%; 
    height:70%; 
    padding-top:10px; 
} 

#NavigateBackward { 
    float:left; 

} 

#NavigateForward { 
    float:right; 
}

js.js

// SLIDE YEARS 

$(document).ready (Initialize); 

function Initialize(){ 
    InitList(); 
} 

var moveLeft = false; 
var moveRight = false; 

var left = function() { 
    if (moveLeft) 
     $(".yearslist").animate({ "marginLeft": "-=5px" }, 50, 'linear', left); 
}; 

var right = function() { 
    if(moveRight) 
     $(".yearslist").animate({ "marginLeft": "+=5px" }, 50, 'linear', right); 
}; 

function InitList() { 
    $("span#NavigateBackward").hover(
     function() { moveLeft=true; left(); }, 
     function() { moveLeft=false; } 
    ); 
    $("span#NavigateForward").hover(
     function() { moveRight=true; right(); }, 
     function() { moveRight=false; } 
    ); 
}

來源

2013-10-09 001221

鑽機我解決了這個問題。

我所做的是添加CSS屬性white-space: nowrap;

.yearslist { 溢出：隱藏; display：inline; white-space：nowrap; }

或查看jsFiddle

來源

2013-10-09 14:26:59 001221

jQuery Slider不拾取元素上線break

回答

相關問題