3

我正在我的网站上制作一个即将举行的活动部分，但我无法弄清楚如何把它放在这里是我能做的。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's 水平溢出。提前感谢您的帮助。:)

4

3 回答 3

1

请试试这个，它正在工作..：FIDDLE DEMO

 <Change ur script according to this>


 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({
            marginLeft: '-=100px'
        }, 1000);
        count++;
    }
});


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

<change your CSS according to this>


 #wrap {
 width:90%;
 }
 #container {
 height:100px;
 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:100px;
height:100px;
background-color:#666;
padding-left:1px;
margin-left: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;
}
于 2013-11-11T12:32:17.530 回答
0

只需删除容器元素的宽度属性。在这种情况下，删除宽度，#wrap 因为不止一个li不能水平放置，它们是垂直放置的。如果您希望它使用水平滚动，那么您应该#container根据元素的数量动态设置宽度。

于 2013-11-11T11:32:18.047 回答
0

你能试试这个吗...

$('#down').click(function () {
            if (count < ($chapters.length - 3)) {                
                $('#container ul').animate({ marginLeft: '-=100px' }, 1000);
                $('#container').find("#bar:nth-child(" + count + 1 + ")").animate({ opacity: '0' }, 1000);
                $('#container').width($('#container').width() - 70);
                count++;
            }
        });


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

                count--;
            }
        });
于 2013-11-11T11:37:36.863 回答