js实现动态标签云

备注：标签实际是可上下滚动的，只是这是图片没展示出来。

 

mounted:function(){	
		var oDiv = document.getElementById('tagArrDIv');
		var aA = document.getElementsByTagName('span');
		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;
			};
		}
		this.tempTimer=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 = 16 + '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;
		}
},
beforeDestroy(){
    clearInterval(this.tempTimer)
}

 

#tagArrDIv {
    position: relative;
    width: 1024px;
    height: 360px;
    margin: 0 auto;
    overflow: hidden;
}
#tagArrDIv span {
	position: absolute;
	color: #fff;
	opacity: 0.85;
	text-decoration: none;
	top: 360px;
	display: block;
	font-size: 14px;
	padding: 6px 13px;
	font-family: arial;
	border: 1px solid #324346;
	border-radius: 8px;
	background: rgba(60, 111, 142, 0.5);
}
#tagArrDIv span:hover {
 	filter: alpha(opacity: 100);
	opacity: 1;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	color: rgb(243, 63, 55);
	background: rgba(255, 255, 255, 1);
}

注意：如果没有效果可能是还没拿到值就初始化了。

参考网址：https://www.17sucai.com/pins/29143.html