现在的位置: 首页 > 综合 > 正文

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

2012年09月26日 ⁄ 综合 ⁄ 共 2573字 ⁄ 字号 小 中 大 ⁄ 评论关闭

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 = 









														
							
			

				返回
			

			

			
			
			
		
		

			
			
		

                

		





















			

		

	
	




	
	


		
						
		

			【上篇】
【下篇】			
			
			
			
		

		
								
		

		

			

				


				

				

				

					
作者: 

				

			

			
				
			
			
			
			

		

		

			
			
		

		
	

	
			
		
抱歉!评论已关闭.

							






	
	

	返回首页

		
	





	Copyright © 2013-2018 学步园  保留所有权利.

	软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）