用【大白自定义】给页面添加点击页面出现富强、民主、文明这类文字动画效果
xiunoa 2020-7-17


JS代码放到全局内容页尾(全局 : html > body ( footer_js_after ))

<script> 
	!function() {
	var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
		index = Math.floor(Math.random() * coreSocialistValues.length);
	document.body.addEventListener('click', function(e) {
		if (e.target.tagName == 'A') {
			return;
		}
		var x = e.pageX,
			y = e.pageY,
			span = document.createElement('span');
		span.textContent = coreSocialistValues[index];
		index = (index + 1) % coreSocialistValues.length;
		span.style.cssText = ['z-index: 9999999; position: absolute; font-weight: bold; color: #1976d2; top: ', y - 20, 'px; left: ', x, 'px;'].join('');
		document.body.appendChild(span);
		animate(span);
	});

	function animate(el) {
		var i = 0,
			top = parseInt(el.style.top),
			id = setInterval(frame, 16.7);

		function frame() {
			if (i > 180) {
				clearInterval(id);
				el.parentNode.removeChild(el);
			} else {
				i += 2;
				el.style.top = top - i + 'px';
				el.style.opacity = (180 - i) / 180;
			}
		}
	}}(); </script>


最新回复 (4)
全部楼主
  • kl85921418
    2022-1-20 2
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • chengxin
    2022-12-24 3
    0
    颜色怎么改。。。。比如说改成渐变色
  • sgujag
    2023-3-8 4
    0
    楼主,你写得实在是太好了。我惟一能做的,就只有把这个帖子顶上去这件事了。 
  • dxs
    10月前 5
    0
    非常棒!!!
返回