码迷,mamicode.com
首页 > Web开发 > 详细

jquery滚动公告demo

时间:2015-05-21 09:14:22      阅读:251      评论:0      收藏:0      [点我收藏+]

标签: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>

技术分享

jquery滚动公告demo

标签:jquery   demo   滚动条   

原文地址:http://blog.csdn.net/u011263845/article/details/45875425

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!