使用动画滚动更改“news-div”

时间:2015-03-14 15:49:51

标签: javascript jquery html css animation

我在网站上为我想要的div做了一个简单的布局。 div处理有关页面的新闻。

div看起来像这样:http://jsfiddle.net/6baouaLt/

问题是我希望在同一个div中有多个新闻内容,例如每5秒当前的新内容将向下滚动并消失,让我们说溢出:隐藏然后另一个新的内容从div的顶部滚动下。

编辑:我已经基本了解了应该如何完成:Picture

我希望你理解我的意思,否则我可以进一步解释。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>News div</title>
    <style type="text/css">
        div.newswrap
            {
                width: 522px;

                box-shadow: 0 10px 5px #c9c9c9;

            }
        div.newstitle
            {
                background-color: #54B3F4;
                display: inline-block;
                margin-right: -4px;
                border-right: 1px solid black;
                padding: 5px 10px;


            }
        div.newscontent
            {
                display: inline-block;
                background-color: #f49554;
                padding: 5px 10px;
            }
        .newstitle > span
            {
                font-family: sans-serif;
                font-weight: 600;
                letter-spacing: 1px;
            }


    </style>
</head>
<body>
    <div class="newswrap">
        <div class="newstitle">
            <span>NEWS</span>
        </div>
        <div class="newscontent">
            <span class="newsspan">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati</span>
        </div>
    </div>
</body>
</html>

0 个答案:

没有答案