定时左右滚动&上下滚动的新闻列表和图片滚动代码

程序简介

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
});

程序代码

定时左右滚动&上下滚动的新闻列表和图片滚动代码 来自：懒人建站 好玩吧整理

转载请注明出处。 本代码仅限于学习交流，请勿用于商业用途!