Question

嗨我有一个基本的jQuery滑块，我有几年我想要使用我的箭头滑动。首先，我希望隐藏任何溢出，这是我无法正常工作的。

我期待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; }
    );
}

Answer 1

对，我解决了这个问题。

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

.yearslist { 溢出：隐藏; 显示：内联; 白色空间：nowrap; }

或查看jsFiddle

jQuery Slider不会在换行符中拾取元素

1 个答案: