h

分支 (1)

管理

管理

h

super-single-page
/
index.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>系统维护中.....</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body,
		.ll_cloudtag {
			height: 100%;
		}

		.ll_cloudtag {
			position: relative;
			z-index: 100;
			/*	background:#24313d; */
		}

		.ll_cloudtag a {
			position: absolute;
			top: 0px;
			left: 0px;
			color: #f1f17c;
			font-weight: bold;
			text-decoration: none;
			padding: 3px 6px;
		}

		.ll_cloudtag a:hover {
			color: #ff0000;
			letter-spacing: 2px;
		}
	</style>
</head>

<body>
	<div class="ll_cloudtag" id="cloudTag">
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
		<a href="#">系统维护中</a>
		<a href="#">请稍后</a>
	</div>
	<script>
		if (typeof ll !== 'object') {
			var ll = {}
			ll.ui = {}
		}
		ll.ui.cloudTag = function (el) {
			var radius = 120,
				dtr = Math.PI / 180,
				d = 300,
				mcList = [],
				active = false,
				lasta = 1,
				lastb = 1,
				distr = true,
				tspeed = 10,
				size = 250,
				mouseX = 0,
				mouseY = 0,
				howElliptical = 1,
				aA = null,
				oDiv = null

			function update() {
				var a
				var b

				if (active) {
					a = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed
					b = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed
				} else {
					a = lasta * 0.98
					b = lastb * 0.98
				}

				lasta = a
				lastb = b

				if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
					return
				}

				var c = 0
				sineCosine(a, b, c)
				for (var j = 0; j < mcList.length; j++) {
					var rx1 = mcList[j].cx
					var ry1 = mcList[j].cy * ca + mcList[j].cz * -sa
					var rz1 = mcList[j].cy * sa + mcList[j].cz * ca

					var rx2 = rx1 * cb + rz1 * sb
					var ry2 = ry1
					var rz2 = rx1 * -sb + rz1 * cb

					var rx3 = rx2 * cc + ry2 * -sc
					var ry3 = rx2 * sc + ry2 * cc
					var rz3 = rz2

					mcList[j].cx = rx3
					mcList[j].cy = ry3
					mcList[j].cz = rz3

					per = d / (d + rz3)

					mcList[j].x = howElliptical * rx3 * per - howElliptical * 2
					mcList[j].y = ry3 * per
					mcList[j].scale = per
					mcList[j].alpha = per

					mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6)
				}

				doPosition()
				depthSort()
			}

			function depthSort() {
				var i = 0
				var aTmp = []

				for (i = 0; i < aA.length; i++) {
					aTmp.push(aA[i])
				}

				aTmp.sort(function (vItem1, vItem2) {
					if (vItem1.cz > vItem2.cz) {
						return -1
					} else if (vItem1.cz < vItem2.cz) {
						return 1
					} else {
						return 0
					}
				})

				for (i = 0; i < aTmp.length; i++) {
					aTmp[i].style.zIndex = i
				}
			}

			function positionAll() {
				var phi = 0
				var theta = 0
				var max = mcList.length
				var i = 0

				var aTmp = []
				var oFragment = document.createDocumentFragment()

				//随机排序
				for (i = 0; i < aA.length; i++) {
					aTmp.push(aA[i])
				}

				aTmp.sort(function () {
					return Math.random() < 0.5 ? 1 : -1
				})

				for (i = 0; i < aTmp.length; i++) {
					oFragment.appendChild(aTmp[i])
				}

				oDiv.appendChild(oFragment)

				for (var i = 1; i < max + 1; i++) {
					if (distr) {
						phi = Math.acos(-1 + (2 * i - 1) / max)
						theta = Math.sqrt(max * Math.PI) * phi
					} else {
						phi = Math.random() * Math.PI
						theta = Math.random() * (2 * Math.PI)
					}
					//坐标变换
					mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi)
					mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi)
					mcList[i - 1].cz = radius * Math.cos(phi)

					aA[i - 1].style.left =
						mcList[i - 1].cx +
						oDiv.offsetWidth / 2 -
						mcList[i - 1].offsetWidth / 2 +
						'px'
					aA[i - 1].style.top =
						mcList[i - 1].cy +
						oDiv.offsetHeight / 2 -
						mcList[i - 1].offsetHeight / 2 +
						'px'
				}
			}

			function doPosition() {
				var l = oDiv.offsetWidth / 2
				var t = oDiv.offsetHeight / 2
				for (var i = 0; i < mcList.length; i++) {
					aA[i].style.left =
						mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px'
					aA[i].style.top =
						mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px'

					aA[i].style.fontSize =
						Math.ceil((12 * mcList[i].scale) / 2) + 8 + 'px'

					aA[i].style.filter = 'alpha(opacity=' + 100 * mcList[i].alpha + ')'
					aA[i].style.opacity = mcList[i].alpha
				}
			}

			function sineCosine(a, b, c) {
				sa = Math.sin(a * dtr)
				ca = Math.cos(a * dtr)
				sb = Math.sin(b * dtr)
				cb = Math.cos(b * dtr)
				sc = Math.sin(c * dtr)
				cc = Math.cos(c * dtr)
			}

			return (function () {
				var i = 0
				var oTag = null

				oDiv = document.getElementById(el)

				aA = oDiv.getElementsByTagName('a')

				for (i = 0; i < aA.length; i++) {
					oTag = {}

					oTag.offsetWidth = aA[i].offsetWidth
					oTag.offsetHeight = aA[i].offsetHeight

					mcList.push(oTag)
				}

				sineCosine(0, 0, 0)

				positionAll()

				oDiv.onmouseover = function () {
					active = true
				}

				oDiv.onmouseout = function () {
					active = false
				}

				oDiv.onmousemove = function (ev) {
					var oEvent = window.event || ev

					mouseX = oEvent.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2)
					mouseY = oEvent.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2)

					mouseX /= 5
					mouseY /= 5
				}
				setInterval(update, 30)
			})()
		}

		ll.ui.cloudTag('cloudTag')
	</script>

	<div align="center" style="position: fixed; left: 0; top: 0px; width: 100%; height: 100%">
		<canvas id="q" width="1440" height="900"></canvas>
	</div>
	<script>
		window.onload = function () {
			//设备宽度
			var s = window.screen
			var width = (q.width = s.width)
			var height = q.height
			var yPositions = Array(300).join(0).split('')
			var ctx = q.getContext('2d')
			var draw = function () {
				ctx.fillStyle = 'rgba(0,0,0,.05)'
				ctx.fillRect(0, 0, width, height)
				ctx.fillStyle = 'green' /*代码颜色*/
				ctx.font = '10pt Georgia'
				yPositions.map(function (y, index) {
					text = String.fromCharCode(1e2 + Math.random() * 330)
					x = index * 10 + 10
					q.getContext('2d').fillText(text, x, y)
					if (y > Math.random() * 1e4) {
						yPositions[index] = 0
					} else {
						yPositions[index] = y + 10
					}
				})
			}
			RunMatrix()

			function RunMatrix() {
				Game_Interval = setInterval(draw, 30)
			}
		}
	</script>
</body>

</html>