jquery滚动公告demo

实现公告栏目循环的滚动效果,直接放代码:

<!doctype html>
<!--jq110-->
<html>
</body>
</html>
<head>
<meta charset="utf-8">
<title>tianzi  code</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
    setInterval(function(){
        var x=$("ul>:first").clone(true);
        $("ul").append(x);
        $("ul>:first").remove();
    }, 2000)
})
</script>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
body{
    margin: 50px;
}
ul{
    list-style: none;
}
li{
    height: 30px;
    line-height: 30px;
}
</style>
</head>
<body>
<ul>
    <li>第一条公告1</li>
    <li>第二条公告2</li>
    <li>第三条公告3</li>
    <li>第四条公告4</li>
    <li>第五条公告5</li>
    <li>第六条公告6</li>
    <li>第七条公告7</li>
    <li>第八条公告8</li>
    <li>第九条公告9</li>
    <li>第十条公告10</li>
</ul>
</body>
</html>

技术分享

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。