3

ここに、ビデオのプレイリストを含む小さな HTML ページを示します。

http://jsfiddle.net/VvR4H/3/

ここに画像の説明を入力

ご覧のとおり、グレーの領域にプレイリストのインライン リストがあり、現在 3 つです。

  • カンガルーファイティング
  • オーストラリアのスポーツ
  • リアルフットボール

各プレイリストの下には動画がリストされています。

私が達成したいのは、プレイリスト間の素敵な水平スクロールです。現在、灰色のプレイリスト バー (テキストが半分にカットされている場所) の左隅または右隅をクリックすると、別のプレイリストにスライドします。

ただ、滑りはあまり良くありません。左隅をクリックすると、カンガルー ファイティングがプレイリスト バーの真ん中にスライドするようにしたいのですが、助けていただけますか?

ここに私のHTMLがあります:

<div class="container">
    <ul class="playlists">
        <li class="playlist">
            <div class="title"> <span class="move-left">Real Foorball</span>
 <span>Kangaroo Fighting</span>
 <span class="move-right">Australian Sports</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 C</li>
                <li class="video">Video 2 C</li>
                <li class="video">Video 3 C</li>
            </ul>
        </li>
        <li class="playlist">
            <div class="title"> <span class="move-left">Kangaroo Fighting</span>
 <span>Australian Sports</span>
 <span class="move-right">Real Football</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 A</li>
                <li class="video">Video 2 A</li>
                <li class="video">Video 3 A</li>
            </ul>
        </li>
        <li class="playlist">
            <div class="title"> <span class="move-left">Australian Sports</span>
 <span>Real Football</span>
 <span class="move-right">Kangaroo Fighting</span>

            </div>
            <ul class="videos">
                <li class="video">Video 1 B</li>
                <li class="video">Video 2 B</li>
                <li class="video">Video 3 B</li>
            </ul>
        </li>
    </ul>
</div>

私のCSS：

ul li {
    list-style: none;
}
.container {
    position: relative;
    background: #000;
    width: 300px;
    height: 500px;
    overflow: hidden;
    font-family: sans-serif;
}
ul.playlists {
    width: 1200px;
    padding-left: 0;
    margin-top: 0;
    position: absolute;
    left: -300px;
}
ul.playlists li {
    float: left;
    width: 300px;
    height: 50px;
}
ul.playlists li.playlist .title {
    width: 100%;
    background: grey;
    color: white;
    line-height: 50px;
    text-align: center;
}
ul.playlists li.playlist .title .move-left, ul.playlists li.playlist .title .move-right {
    width: 30px;
    line-height: 50px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
ul.playlists li.playlist .title .move-left {
    float: left;
    direction: rtl;
}
ul.playlists li.playlist .title .move-right {
    float: right;
}
ul.videos {
    clear: both;
    padding-left: 0;
}
ul.videos li {
    float: left;
    width: 250px;
    height: 50px;
    padding: 25px;
    color: white;
    background: blue;
    border-top: 1px solid black;
}

そして私のJavaScript：

$(".move-left").click(function () {
    $(this).parent().parent().parent().animate({
        "left": "0"
    }, 500, "linear", function () {
        console.log("yay");
    });
});

$(".move-right").click(function () {
    $(this).parent().parent().parent().animate({
        "left": "-600"
    }, 500, "linear", function () {
        console.log("yay");
    });
});
4

1 に答える 1

1

完成ではありませんが（無限ループはしませんでした）、ご要望のとおりアニメーションが良くなったと思います。

あなたのhtmlを2つの部分に分けました。最初の 1 つは、2 番目よりもゆっくりと移動します。したがって、次のタイトルの半分のテキストを表示できますが、テキストを複製する必要はありません。

http://jsfiddle.net/VvR4H/10/

html

<div class="container">
    <div class="title-wrapper">
            <div class="title"> 
                <span>Real Foorball</span>
                <span>Kengoroo Fighting</span>
                <span>Australian Sports</span>
            </div>
    </div>


    <div class="playlist">
            <ul class="videos">
                <li class="video">Video 1 C</li>
                <li class="video">Video 2 C</li>
                <li class="video">Video 3 C</li>
            </ul>
            <ul class="videos">
                <li class="video">Video 1 A</li>
                <li class="video">Video 2 A</li>
                <li class="video">Video 3 A</li>
            </ul>
            <ul class="videos">
                <li class="video">Video 1 B</li>
                <li class="video">Video 2 B</li>
                <li class="video">Video 3 B</li>
            </ul>
        </div>
</div>

CSS

    ul li {
    list-style: none;
}

.container {
    position: relative;
    background: #000;
    width: 300px;
    height: 500px;
    font-family: sans-serif;
    overflow: hidden;
}

div.title-wrapper {
    background: grey;
    height: 50px;
}

div.title {
    position: absolute;
    overflow: hidden;
    height: 50px;
    left: 75px;
    white-space: nowrap;
}

div.playlist {
    position: absolute;
    overflow: hidden;
    top: 50px;
    clear: both;
    white-space: nowrap;
}
div.title span {
    width: 300px;
    background: grey;
    color: white;
    line-height: 50px;
    text-align: left;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    text-indent: 20px;
}

ul.videos {
    float: left;    
    width: 300px;
    margin: 0;
    padding: 0;
}

ul.videos li {
    display: block;
    background: blue;
    height: 50px;
    padding: 10px 20px;
    margin: 1px 0 0 0;
    color: white;
}

JavaScript

$('.title span').css({
    'text-indent' : '0', 
    'text-align' : 'center', 
    'width' : '150px'
});

var titles = [];
$('.title span').each( function () {
    titles.push($(this));
});

var max = titles.length-1;
var left = max;
var right = 1;

$('.title span').click(function () {
    console.log($(this).context.innerText + '   left: ' +titles[left].context.innerText + '   right: ' +titles[right].context.innerText)
    if($(this).context==titles[left].context) {
        left = (left==0) ? max : --left;
        right = (right==0) ? max : --right;
        $('.title').animate({
            "left": "+=150px"
        }, 500);
        $('.playlist').animate({
            "left": "+=300px"
        }, 500);
    } 
    if($(this).context==titles[right].context) {
        left = (left==max) ? 0 : ++left;
        right = (right==max) ? 0 : ++right;
        $('.title').animate({
            "left": "-=150px"
        }, 500);
        $('.playlist').animate({
            "left": "-=300px"
        }, 500);
    }
});
于 2013-06-27T19:49:47.303 に答える