6

divに多くのスパンがありますoverflow:hidden;。divの幅が固定されているため、最初は5つのスパンしか表示されません。ボタンをクリックしたときに、特定のスパンにスライドして表示するにはどうすればよいですか？

ライブJSFIDDLE

JQUERY

$("#gobtn").click(function (e)  {
    $("span.selected").removeClass('selected');
    var s = $('#nr').val();
    $("#c" + s).addClass('selected');
  //$("#c" + s).??? 
});

HTML

<div class='container'>
    <div class='circles'>
        <span id='c1'>1</span>  
        <span id='c2'>2</span>
        <span id='c3'>3</span>
        <span id='c4'>4</span> 
        <span id='c5'>5</span>  
        <span id='c6'>6</span>  
        <span id='c7'>7</span>
        <span id='c8'>8</span> 
        <span id='c9'>9</span>  
        <span id='c10'>10</span> 
    </div>
</div>
<br /><br/>
Go to circle nr. <input id='nr' type="text" /> 
<input type='button' id='gobtn'  value='go!'>

CSS

span {
    border: solid 1px Silver;
    height: 14px;
    width: 14px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    float: left;
    background-color: #fff;
    cursor: pointer;
    font-size:10px;
    text-align:center;
    margin-right:50px;
}
.circles {
    width:9000px;
}
.container {
    width:300px;
    display:block;    
    overflow:hidden;
    border:solid 2px #eee;
    padding:10px;
}
.selected
{
    background-color:Yellow;
}
4

2 に答える 2

5

クラスにを追加しposition: relativeますcircles。そしてleft、メソッドでプロパティを設定しますanimate。

作ってみました。これを試してください。必要に応じてこれを改善できます。

于 2013-03-26T09:34:17.093 に答える
1

関数でcirclesクラスの左マージンをアニメーション化します。click

$("#gobtn").click(function (e)  {
    $("span.selected").removeClass('selected');
    var s = $('#nr').val();
    $("#c" + s).addClass('selected');

    $(".circles").animate({
        marginLeft: '-' + (parseInt(s-1) * 40) + 'px'
    }, 500);
});

http://jsfiddle.net/LdzTH/15/

それでも、数字を希望の場所に正確に合わせるために微調整する必要があります。つまり、常に中央で選択する必要があります。

于 2013-03-26T09:39:05.640 に答える