<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动公告栏</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<style type="text/css">
* { margin:0; padding:0;}
body { font:12px Verdana, Geneva, sans-serif; color:#666; text-align:center;}
#container { width:180px; margin:30px auto; text-align:left; padding:10px; border:1px solid #ccc; height:250px; position:relative; overflow:hidden;}
.noticeList { width:180px; list-style:inside; position:absolute; top:270px; left:10px;}
.noticeList li { padding-bottom:5px;}
.noticeList li a { color:#606060;}
.noticeList li a:hover { color:#09F;}
</style>
<script type="text/javascript">
jQuery(function($) {
function ScrollAction(listObj, listElem, speed, isSeries) { //listObj为需要滚动的列表， speed为滚动速度
var pos, top, aniTop, height;
var id = ''; //记录setInterval的标记id
pos = listObj.position();
top = pos.top; //列表的top
aniTop = top; //记录当前运动时的top
height = listObj.height(); //列表的高度
var scrollUp = function() {
aniTop--;
if(!isSeries) { //isSeries变量控制是否连续滚动，false不连续，true连续
if(aniTop == -height) { //不连续，滚动玩重新滚动
listObj.css({'top': top});
aniTop = top;
};
} else {
if(aniTop == -listObj.children().eq(0).height()) { //连续滚动
var firstItem = '<' + listElem +'>' + listObj.children().eq(0).html() + '</' + listElem +'>';
listObj.children().eq(0).remove();
listObj.append(firstItem);
aniTop = 4;
};
};
listObj.css({'top': aniTop + 'px'});
};
var hover = function(id) {
listObj.hover(function() {
clearInterval(id);
}, function() {
id = setInterval(scrollUp, speed);
});
};
this.start = function() {
id = setInterval(scrollUp, speed);
hover(id);
};
};
var sa = new ScrollAction($('.noticeList'), 'li', 30, true);
sa.start();
});
</script>
</head>
<body>
<div id="container">
<ul class="noticeList">
<li><a href="http://www.ihiro.org/wordpress-the-article-automatically-appear-as-two" title="Wordpress:将文章自动显示为两列">Wordpress:将文章自动显示为两列</a></li>
<li><a href="http://www.ihiro.org/film-2012-really-have-that-day-discovery-channel-expose-for-you" title="电影:《2012》真的有那一天吗？探索频道为你揭露">电影:《2012》真的有那一天吗？探索频道为你揭露</a></li>
<li><a href="http://www.ihiro.org/information-november-2009-programming-language-list" title="资讯:2009年11月编程语言排行榜">资讯:2009年11月编程语言排行榜</a></li>
<li><a href="http://www.ihiro.org/a-busy-week-for-rent-a-house-was-finally-gaoding" title="租房:忙碌一周，房子终于搞定">租房:忙碌一周，房子终于搞定</a></li>
<li><a href="http://www.ihiro.org/my-third-theme-innernews" title="主题:我的第三个主题innerNews提供下载">主题:我的第三个主题innerNews提供下载</a></li>
<li><a href="http://www.ihiro.org/my-first-plugin-scrolltop" title="插件:我的第一个插件–简约的scrollTop滑动插件">插件:我的第一个插件–简约的scrollTop滑动插件</a></li>
<li><a href="http://www.ihiro.org/celebrate-my-blog-pr-catapulted-3" title="PageRank:庆贺我的博客PR连升3级">PageRank:庆贺我的博客PR连升3级</a></li>
<li><a href="http://www.ihiro.org/myeclipse-8-and-registration-number" title="软件:MyEclipse 8.0发布，附注册码">软件:MyEclipse 8.0发布，附注册码</a></li>
<li><a href="http://www.ihiro.org/tv-leng-jian" title="电视:《冷箭》，让我“失眠”的谍战片">电视:《冷箭》，让我“失眠”的谍战片</a></li>
<li><a href="http://www.ihiro.org/hd-is-an-attitude" title="下载:高清，是一种态度！">下载:高清，是一种态度！</a></li>
</ul>
</div>
<p></p>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
前往页