js 原生 新闻 上下 左右滚动效果

 

有时候需要用到新闻列表滚动，这里展示一个例子

引用newscrool.js

源码

var scrollNews = function(config){
	var D = document, 
	unitTag = config.items ? config.items : 'li', 
	cloneTag = config.cloneTag ? config.cloneTag : 'div', 
	copydiv = null, 
	oSelf = this, 
	isString = function(s){
		    return typeof s === 'string';
	};

	this.scrollArea = isString(config.area) ? document.getElementById(config.area) : config.area;
	this.scrollMsg = isString(config.msg) ? document.getElementById(config.msg) : config.msg;
	console.log(this.scrollMsg);
	this.items = this.scrollMsg.getElementsByTagName(unitTag);

	this.length = this.items.length;
	this.itemWidth = this.items[0].offsetWidth;
	this.width = this.itemWidth * this.length;
	this.itemHeight = this.items[0].offsetHeight;
	this.height = this.itemHeight * this.length;
	
	if(config.direction){
		this.direction = config.direction.toUpperCase();
	}
	if (config.pauseTime) {
		this.pauseTime = config.pauseTime;
	}
	if (config.chgUnitTime) {
		this.chgUnitTime = config.chgUnitTime;
	}
	if(config.speed){
		this.speed = config.speed;
	}
	
	this.scrollMsg.style.position = 'absolute';
	this.scrollMsg.style.top = '0';
	this.scrollMsg.style.left = '0';
	
	copydiv = document.createElement('div');
	copydiv.id = oSelf.scrollArea.id + '_copymsgid';
	
	if (this.direction === 'V') {
		copydiv.style.height = oSelf.height + 'px';
		copydiv.style.left = '0';
		copydiv.style.top = oSelf.height + 'px';
	}
	else {
		copydiv.style.width = oSelf.width + 'px';
		copydiv.style.left = oSelf.width + 'px';
		copydiv.style.top = '0';
	}
	copydiv.style.position = 'absolute';
	
	copydiv.innerHTML = this.scrollMsg.innerHTML;
	this.scrollArea.appendChild(copydiv);
	this.copyMsg = copydiv;
};

scrollNews.prototype.scrollArea = null;
scrollNews.prototype.scrollMsg = null;
scrollNews.prototype.copyMsg = null;
scrollNews.prototype.items = null;
scrollNews.prototype.length = 0;
scrollNews.prototype.itemWidth = 0;
scrollNews.prototype.itemHeight = 0;
scrollNews.prototype.width = 0;
scrollNews.prototype.height = 0;
scrollNews.prototype.scrollValue = 0;
scrollNews.prototype.scrollWidth = 0;
scrollNews.prototype.scrollHeight = 0;
scrollNews.prototype.direction = 'V';
scrollNews.prototype.isPause = true;
scrollNews.prototype.scrollTimer = null;
scrollNews.prototype.chgUnitTime = 4000;
scrollNews.prototype.pauseTime = 2000;
scrollNews.prototype.speed = 50;
scrollNews.prototype.lastIndex = 0;

scrollNews.prototype.play = function(){
	var oSelf = this, anim = function(){
		var dist = 0;
		if (oSelf.scrollTimer) {
			clearTimeout(oSelf.scrollTimer);
		}
		if (oSelf.isPause) {
			oSelf.scrollTimer = setTimeout(anim, oSelf.speed);
			return;
		}
		if (oSelf.direction === 'V') {
			if ((oSelf.itemHeight * oSelf.lastIndex - oSelf.scrollValue) <= 0) {
				oSelf.scrollValue = 0;
			}
			else {
				dist = Math.ceil(((oSelf.itemHeight * oSelf.lastIndex) - oSelf.scrollValue) / 10);
				oSelf.scrollValue += dist;
				oSelf.scrollHeight += dist;
			}
			oSelf.scrollArea.scrollTop = oSelf.scrollValue;
			if (oSelf.scrollHeight % oSelf.itemHeight === 0) {
				oSelf.lastIndex += 1;
				if (oSelf.lastIndex === (oSelf.length+1)) {
					oSelf.lastIndex = 0;
				}
				if (!oSelf.lastIndex) {
					oSelf.scrollTimer = setTimeout(anim, oSelf.chgUnitTime/2);
				}
				else{
					oSelf.scrollTimer = setTimeout(anim, oSelf.chgUnitTime);
				}
			}
			else {
				oSelf.scrollTimer = setTimeout(anim, oSelf.speed);
			}
		}
		else {
			if ((oSelf.itemWidth * oSelf.lastIndex) - oSelf.scrollValue <= 0) {
				oSelf.scrollValue = 0;
			}
			else {
				dist = Math.ceil(((oSelf.itemWidth * oSelf.lastIndex) - oSelf.scrollValue) / 10);
				oSelf.scrollValue += dist;
				oSelf.scrollWidth += dist;
			}
			oSelf.scrollArea.scrollLeft = oSelf.scrollValue;
			if (oSelf.scrollWidth % oSelf.itemWidth === 0) {
				oSelf.lastIndex += 1;
				if (oSelf.lastIndex === (oSelf.length+1)) {
					oSelf.lastIndex = 0;
				}
				if (!oSelf.lastIndex) {
					oSelf.scrollTimer = setTimeout(anim, oSelf.chgUnitTime/2);
				}
				else{
					oSelf.scrollTimer = setTimeout(anim, oSelf.chgUnitTime);
				}
			}
			else {
				oSelf.scrollTimer = setTimeout(anim, oSelf.speed);
			}
		}
	};
	anim();
};

var YScroll = function(){
	var i, len = arguments.length, news = [], timer = [];
	for (i = 0; i < len; ++i) {
		news[i] = new scrollNews(arguments[i]);
		timer[i] = setTimeout(function(index){
			return function(){
				if (timer[index]) {
					clearTimeout(timer[index]);
				}
				news[index].isPause = false;
			}
		}(i), news[i].pauseTime);
		
		news[i].scrollArea.onmouseover = function(index){
			return function(){
				news[index].isPause = true;
			}
		}(i);
		news[i].scrollArea.onmouseout = function(index){
			return function(){
				news[index].isPause = false;
			}
		}(i);
		news[i].play();
	}
	return news;
};

HTML

代码

 <div id="new_list">

                     <ul id="news1">
                         <li><a href="xinwen_news41.html">“象云”精彩亮相第十九届网络新技术与应用年会</a></li>
                         <li><a href="xinwen_news40.html">“象云”再获殊荣，率先拿下公有云行业金融领域云计算应用大奖</a></li>
                         <li><a href="xinwen_news39.html">“象云”获邀加入中国开源云联盟</a></li>
                         <li><a href="xinwen_news38.html">“象云”在2015中国开源云计算大会上诠释面向金融行业的企业级公有云</a></li>
                         <li><a href="xinwen_news37.html">携手中国开源云计算大会，品质象云精彩为您呈现</a></li>
                         <li><a href="xinwen_news36.html">象云为企业级公有云部署场景答疑解惑</a></li>
                         <li><a href="xinwen_news35.html">再谈企业云计算的架构选择</a></li>
                     </ul>

                 </div>

CSS代码

注意最外层元素 要设置position:relative;

　　

JS代码 

area 最外层元素ID  msg 下级元素ID  items 滚动元素 speed 滚动速度 direction 向左滚动H 向上滚动V 

 (function(){


     // 纵向滚动
     var VScroll = new scrollNews({
         area: 'new_list',
         msg: 'news1',
         items: 'li',
         speed: 50,
         direction: 'V'
     }), 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();

 })();