Hiro技术站

插件专区新篇—-Hiro.pagenav:自渲染、自解析的分页插件 v1.8更新

jQuery:增强型走马灯公告栏,可以抛弃marquee标签了

分类:jQuery, 案例分享 发表时间:2009年11月26日 字体大小:12号14号

昨天晚上收到的求助邮件,说因上级的要求需要制作一个走马灯效果的公告栏,希望我可以帮助他解决。因看到邮件的时候都快要睡觉了,所以并没有立即处理。

今天早上到了公司,放开手边的工作,花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他,但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候,该同学又发来了邮件,说我的公告栏的效果有点欠缺,现在的效果和marquee标签的效果一样,需要等内容上移完成后才会重复滚动,如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了,mail给他。不知道他是否还会有什么新的要求呢,期待啊!毕竟这对我来说也是一个挑战嘛,同时也帮助到了别人,何乐而不为呢!

因为觉得功能差不多都实现了,所以也共享出来与大家分享,或许会对你有所帮助呢。

downloaddemo

1.Html代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

2.CSS代码:

1
2
3
4
5
6
7
8
* { 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; text-decoration:none;}
	.noticeList li a:hover { color:#09F;}

3.JS代码:(备了部分注释,不懂的可以留言询问。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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();
});

使用时别忘了引入jQuery库哦,也希望大家给我提出意见,或功能扩充等要求。

不错不错,已经有 个评论!
  1. 很不错的效果。JQuery部分看起来还是有点困难,慢慢来。

  2. 强人果然是强人!!

  3. 学习了,谢谢!

  4. 额,还是叫我DeepBlue好,不然有点怪怪的,已经很好了,当然最好的话,希望能加到后台管理的功能,或者是直接来个插件,哈哈,要求有点高

    • 汗,我还以为是两个不同的人呢!!!!sorry!

  5. 那是以前的网名,忘记改了

  6. 突然发现个问题,你日志里的字怎么让他有颜色的?我弄不出来

    • 把要亮色的文字价格label标签,给label一个内置的style属性,然后把css写在里面就好了啊

  7. 效果真棒!

  8. Ray

    觉得可以再优化一点。。你是根据每一个LI的高度去判定是否连续滚动的。。建议改成整个ListOBJ的高度,减少一下滚动时的判断更好一点。毕竟IE的JS执行效率很低下,减少执行次数会更有利。
    呵呵~~~~~~~~~~

    • 多写指教!!可惜你没有留网站啊,不然可以多多走动!

我要评论

* *