3

Web サイトに今後のイベント セクションを作成していますが、それをここに配置する方法がわかりません。JQueryはこちら。

jsfiddle.net/VRm4a/1

<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
    </head>
    <body>
        <style type="text/css">
            #wrap
            {
                width:300px;
            }
            #container
            {
                height:403px;
                background-color:#CCC;
                overflow:hidden;
                overflow-x: auto;
                overflow-y: no-content;
                margin-top:100px;
            }
            #container ul 
            { 
                list-style:none;
                padding:0px;
                margin-top:0px;
            }
            #container ul li
            {
                width:300px;
                height:100px;
                background-color:#666;
                padding-top:1px;
                margin-top:1px;
                float: left;
            }
            .bars
            {
                margin: 5px 5px 5px 5px;
            }
            .title-news
            {
                color:#6ac4bb;
                font-size:18px;
            }
            .date-news 
            {
                color:#a4a4a4;
                font-size:12px;
            }
            .body-news
            {
                color:#fff;
                font-size:12px;
            }
        </style>
        <script src="./jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                        var $chapters = $('#container').find('ul').children('li');
                        var count=0;
                        $('#down').click(function(){



                        if(count<($chapters.length-3))
                        {

                        $('#container').find("ul li:nth-child("+count+1+")").animate({opacity:'0'} , 1000); 
                        $('#container ul').animate({marginTop:'-=100px'} , 1000);
                        count++;
                        }
                        });


                        $('#up').click(function(){
                        if(count<($chapters.length-1) && count > 0 )
                        {
                        $('#container ul').animate({marginTop:'+=100px'} , 1000);
                        $('#container').find("ul li:nth-child("+count+")").animate({opacity:'1'} , 1000);       
                        count--;
                        }
                        });

                        });
        </script>
        <div id="wrap">
            <div id="container">
                <ul>
                    <li>
                        <div class="bars">
                            <p class="title-news">1</p>
                            <p class="date-news ">september</p>
                            <p class="body-news">hello<br/></p>
                        </div>
                    </li>
                    <li>
                        <div class="bars">
                            <p class="title-news">2</p>
                            <p class="date-news ">september</p>
                            <p class="body-news">hello</p>
                        </div>
                    </li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </div>
            <div id="down" style="background-color:#06C; width:50px; margin:15px; float:left;">
                down
            </div>
            <div id="up" style="background-color:#06C; width:50px; margin:15px; float:right;">
                up
            </div>
        </div>
    </body>
</html>

ここで起こっていることは、liが垂直方向にアニメーション化されていることです。横向きにアニメートしたい。私は HTML/CSS が苦手で、 をli横にオーバーフローさせることさえできませんでした。事前に助けてくれてありがとう。:)

4

3 に答える 3

0

コンテナ要素の width プロパティを削除するだけです。この場合、#wrap 複数の幅liが水平方向に収まらないため、垂直方向に配置されます。水平スクロールを使用する場合は#container、要素数に基づいて動的に幅を設定する必要があります。

于 2013-11-11T11:32:18.047 に答える