META-INF.resources.asset.ajaxjs-ui.js.widgets.marquee.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of ajaxjs-web Show documentation

AJAXJS Web aims to full-stack, not only the server-side framework, but also integrates the front-end library. It's written in HTML5 + Java, a successor to the JVM platform, efficient, secure, stable, cross-platform and many other advantages, but it abandoned the traditional enterprise architecture brought about by the large and bloated, emphasizing the lightweight, and fast, very suitable for the Internet fast application.

There is a newer version: 1.3.0

Show newest version

aj._simple_marquee_text = {
	props : {
		interval : {
			type : Number, // 动画时间间隔
			default : 500
		},
		
		canstop :{
			type : Boolean, //  是否可以鼠标移入时候暂停动画
			default : true
		}
	},
	mounted : function() {
		if (this.canstop) {
			this.$el.onmouseover = this.clearTimer.bind(this);
			this.$el.onmouseout = this.start.bind(this);
		}
	},
	methods : {
		start : function() {
			this.$timerId = window.setInterval(this.scroll, this.interval);
		},
		clearTimer : function() {
			this.$timerId && window.clearInterval(this.$timerId);
		}
	}
};

// 超简单跑马灯
// 插槽中不能包含 tag
Vue.component('aj-super-simple-marquee-text', {
	mixins : [aj._simple_marquee_text],
	template : '这是一段滚动的文字；这是一段滚动的文字；这是一段滚动的文字',
	
	mounted : function() {
		this.$arr = this.$el.innerHTML.split("");
		this.start();
	},
	methods : {
		scroll : function () {
			this.$arr.push(this.$arr.shift());
			this.$el.innerHTML = this.$arr.join("");
		}
	}
});

// 上下字幕
Vue.component('aj-simple-marquee-text', {
	mixins : [aj._simple_marquee_text],
	
	template : '11111111111
22222222222
33333333333
44444444444
55555555555',
	
	mounted : function() {
		this.start();
	},
	
	methods : {
		scroll : function () {
			var lastEl = this.$el.firstChild;
			
			while (lastEl.nodeType != 1)
				lastEl = lastEl.nextSibling;// 找到最后一个元素

			this.$el.appendChild(this.$el.removeChild(lastEl)); // 把最后一个元素放到前头
		}
	}
});

Vue.component('aj-simple-marquee', {
	props : {
		interval : {
			default : 20
		},
		pauseInterval : { // 暂停间隔时间
			type : Number,
			default : 2000
		},
		itemHeight : { // 每一项的高度
			type : Number,
			required : 20,
		},
	},
	
	template : 
		'\
			\
			\
			\
		',
		
	mixins : [aj._simple_marquee_text],
	
	mounted : function() {
		var el = this.$el, children = el.$('.items').children, itemHeight = this.itemHeight;
		
		el.style.height = itemHeight + "px";
		
		var allHeight = 0;
		for(var i = 0, j = children.length; i < j; i++) { // 设置每行高度
			var item = children[i];
			item.style.display = 'block';
			item.style.height = itemHeight + "px";
			
			allHeight += itemHeight;
		}
		
		el.$('.clone').style.height = allHeight + 'px';// 相同高度
		
		// 复制第一个元素
		var clone = children[0].cloneNode(true);
		el.$('.clone').appendChild(clone);
		
		setTimeout(this.start.bind(this), 2000);
	},
	
	methods : {
		scroll :function () {
			var el = this.$el, top = el.scrollTop, height = el.$('.items').clientHeight;

			if (top <= height) {
				el.scrollTop ++;
				
				if(top != 0 && (top % this.itemHeight) === 0) {
					this.clearTimer();
					setTimeout(this.start.bind(this), this.pauseInterval);
				}
				
			} else {// 第一个恰好滑完
				el.scrollTop -= height; //返回至开头处
			}
		}
	}
});