注册 登录 充值会员 退出
毕业设计 PHP源码
充值

JS冒泡动画效果文字云标签代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-05-26
JS冒泡动画效果文字云标签代码
一款很简单的JS冒泡动画效果文字云标签代码,一个个文字标签从下往上像气泡缓缓上升动画效果。


js代码

<script>
	window.onload = function() {
	var oDiv = document.getElementById('div1');
	var aA = document.getElementsByTagName('a');
	var i = 0;
	for (i = 0; i < aA.length; i++) {
		aA[i].pause = 1;
		aA[i].time = null;
		initialize(aA[i]);
		aA[i].onmouseover = function() {
			this.pause = 0;
		};
		aA[i].onmouseout = function() {
			this.pause = 1;
		};
	}
	setInterval(starmove, 50);

	function starmove() {
		for (i = 0; i < aA.length; i++) {
			if (aA[i].pause) {
				domove(aA[i]);
			}
		}
	}

	function domove(obj) {
		if (obj.offsetTop <= -obj.offsetHeight) {
			obj.style.top = oDiv.offsetHeight + "px";
			initialize(obj);
		} else {
			obj.style.top = obj.offsetTop - obj.ispeed + "px";
		}
	}

	function initialize(obj) {
		var iLeft = parseInt(Math.random() * oDiv.offsetWidth);
		var scale = Math.random() * 1 + 1;
		var iTimer = parseInt(Math.random() * 1500);
		obj.pause = 0;

		obj.style.fontSize = 12 * scale + 'px';

		if ((iLeft - obj.offsetWidth) > 0) {
			obj.style.left = iLeft - obj.offsetWidth + "px";
		} else {
			obj.style.left = iLeft + "px";
		}
		clearTimeout(obj.time);
		obj.time = setTimeout(function() {
			obj.pause = 1;
		}, iTimer);
		obj.ispeed = Math.ceil(Math.random() * 4) + 1;
	}
};
</script>