jq-新闻滚动

jq–新闻滚动

jq 新闻滚动效果

---

<div id="box">
    <ul id="newslist">
        <li>
            <div class="left"><img src="../img/1.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点1</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#1">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/2.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点2</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#2">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/3.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点3</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#3">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/4.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点4</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#4">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/5.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点5</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#5">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/6.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点6</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#6">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/7.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点7</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#7">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/8.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点8</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#8">【查看新闻】</a></p>
            </div>
        </li>
        <li>
            <div class="left"><img src="../img/9.jpg" alt=""></div>
            <div class="right">
                <h3>新闻热点9</h3>
                <p>黑洞是现代广义相对论中，存在于宇宙空间中的一种天体<a href="#9">【查看新闻】</a></p>
            </div>
        </li>
    </ul>
</div>

<script>
    // 最下的往最上顶 --最新的时间在最上面，旧的往下推
    $(function(){
        setInterval(function(){
            $('#newslist li')
            .last().fadeTo(0,0).hide().prependTo('#newslist').slideDown(1000).fadeTo(1500,1); // 最后一个开始透明，隐藏，再添加到列表最前面，淡入显示，1.5s完全显示
            // 最后0 - 隐藏 - 最前 - 淡入 - 1.5s->1

        },3000);
    })
</script>