会滚动的新闻列表和图片滚动代码-懒人建站

程序简介

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

程序代码

本代码由懒人建站 收集整理 我要学电脑.COM →www.51xuediannao.com
懒人建站 http://www.51xuediannao.com
我们为您提供- HTML+CSS模板JS代码网页特效导航菜单焦点幻灯片网页欣赏CSS技巧 懒人建站只收录实用和能提高用户体验的代码 我们只想解放出你的部分写代码时间来思考更高层次的设计,而不是要你懒惰、拼凑。