<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 实现滚动公告</title>
<script src="jquery-1.10.1.min.js" ></script>
<link rel="stylesheet" href="base.css" />
<style>
ul{ border: 1px solid #eee; width: 300px; margin: 20px auto 0 auto;}
ul 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>
<script>
setInterval(function(){
$('ul').children().first().clone(true).appendTo('ul');
$('ul>:first').remove();
},1000);
</script>
</body>
</html>
效果图：
相关推荐
用jQuery实现的上下滚动公告栏。主要用jQuery中的animate()方法和setInterval()实现的，代码简单使用。
jQuery animate封装向上滚动插件，使用定时器setInterval调用封装的插件实现滚动公告
网站中公告上下无缝滚动，marquee，要求每条广告的内容高度一致，如果想改成高度不一致的无缝滚动，联系我，我再发给你，懒得一批。
之前做项目的时候，一直都想着做一个上下滚动的公告栏，作为展示网站的最新公告信息，给用户带来极好的用户体验，下面小编通过实例代码给大家分享基于jQuery实现上下滚动公告栏，感兴趣的朋友一起看看吧
代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<head><... charset=gb2312″ /><...jQuery公告文字左右滚动效果-www.jb51.net</title><style type
主要介绍了jQuery实现公告新闻自动滚屏效果实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
需要在页面中一个小的区域循环滚动展示新闻（公告、活动、图片等等），并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。 效果图： 上干货 html： 代码如下: ”news”> <ul> <li><a>aaaaaaaaaaaaaaa</a></li> ...
今儿分享一个jquery实现多行滚动效果。 我看一些论坛网站上面，公告处用的较多。 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0)....
今儿分享一个jquery实现多行滚动效果。 我看一些论坛网站上面，公告处用的较多。 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0)....
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <... <head> <... charset=utf-8″ /> <... [removed]
需求1和需求2：内容持续滚动的需求有些类似前一篇文章《小模块：公告滚动并暂停》中介绍的功能，在那篇文章中，此功能使用css的position定位来控制整个ul列表的移动动画。结合需求2，我们可以写得更简单一些，让...