大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > 会滚动的新闻列表和图片滚动代码

会滚动的新闻列表和图片滚动代码(1)

关键词:会滚动的新闻列表和图片滚动代码  阅读(977) 赞(32)

[摘要]本文介绍会滚动的新闻列表和图片滚动代码,与大家分享。

程序简介

ScrollNews 无缝循环滚动新闻,程序改编至雅虎中国的scrollVertical.js。修改后,新闻可以横向和纵向的滚动,并且滚动添加了加速和减速的平滑过度效果,让整个滚动新闻的滚动看上去更自然。

调用方法

第一步:在页面中调用scrollnews.js文件,例如:

<script type="text/javascript" src="js/scrollnews.js"></script>

第二步:编写调用代码:

/* 
   方式一
   自己编写调用函数,分别设置横向和纵向的滚动新闻 
   这么写,自己写的代码更多,但是自己的可控性更多
*/
(function(){
    // 横向滚动
	var HScroll = new scrollNews({
		area: 'scrollnews',         // 包含滚动信息的父节点ID
		msg: 'scrollnews_con',      // 要滚动信息的ID 
		items: 'ul',                // 表示一行或一列滚动信息的HTML标签
		speed: 10,                  // 滚动速度
		direction: 'H'              // 滚动方向(可选):H - 横向滚动、V(默认) - 垂直滚动
	}), HTimer = setTimeout(function(){
		if (HTimer) {
			clearTimeout(HTimer);
		}
		HScroll.isPause = false;
	}, HScroll.pauseTime);
	HScroll.scrollArea.onmouseover = function(){
		HScroll.isPause = true;
	};
	HScroll.scrollArea.onmouseout = function(){
		HScroll.isPause = false;
	};
	HScroll.play();
	
	// 纵向滚动
	var VScroll = new scrollNews({
		area: 'scrollnews_v',
		msg: 'scrollnews_con_v',
		items: 'ul',
		speed: 50
	}), VTimer = setTimeout(function(){
		if (VTimer) {
			clearTimeout(VTimer);
		}
		VScroll.isPause = false;
	}, VScroll.pauseTime);
	VScroll.scrollArea.onmouseover = function(){
		VScroll.isPause = true;
	};
	VScroll.scrollArea.onmouseout = function(){
		VScroll.isPause = false;
	};
	VScroll.play();
	
})();


/* 
   方式二
   使用我编写好的方法YScroll,只需要传递多个参数就可以一次调用多个混动新闻。 
   这么写,调用更方便, 不用每个混动新闻都自己编写相关的代码。
   但是这么写,就只能直接执行scrollnews对象的play()方法(滚动),可控性好较差。
*/
YScroll({
		area: 'scrollnews',
		msg: 'scrollnews_con',
		items: 'ul',
		speed: 10,
		direction: 'H'
	},{
		area: 'scrollnews_v',
		msg: 'scrollnews_con_v',
		items: 'ul',
		speed: 50
});
程序代码:
«上一页12下一页»


相关评论