JS打造的跟随鼠标移动的小星星组成的图案

  •   
  • 4020
  • jQuery
  • 9
  • super_dodo
  • 2016/09/19

今天想继续打造改造一下跟随鼠标移动的动画的效果,无意间浏览到一个很不错的js效果,动感十足,Mark转载记录一下.效果如下,欢迎各位改造体验.直接上示意图和代码段.

===猛戳体验地址===

===猛戳体验地址===

js_mouse_move_star

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>JS打造的跟随鼠标移动的小星星组成的图案</title>
	<style type="text/css">
		html{overflow:hidden;}
		body{position:absolute;height:100%;width:100%;margin:0;padding:0;}
		#screen{background:#000;position:absolute;width:100%;height:100%;}
		#screen span{background:#77CE00;font-size:0;overflow:hidden;width:2px;height:2px;}
		h3#demo{color:#ff5800;text-align:center;font-family:"Microsoft Yahei";font-size:20px;padding:20px;}
	</style>


<script type="text/javascript"> 
	var Follow = function () {
		var $ = function (i) {return document.getElementById(i)},
		addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},
		OBJ = [], sp, rs, N = 0, m;

		var init = function (id, config) {
			this.config = config || {};
			this.obj = $(id);
			sp = this.config.speed || 4;
			rs = this.config.animR || 1;
			m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};
			this.setXY();
			this.start();
		}

		init.prototype = {
			setXY : function () {
				var _this = this;
				addEvent(this.obj, 'mousemove', function (e) {
					e = e || window.event;
					m.x = e.clientX;
					m.y = e.clientY;
				})
			},
			start : function () {
				var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;
				OBJ[N++] = OO = new CObj(null, 0, 0);
				for(var i=0;i<360;i+=20){
					var O = OO;
					for(var j=10; j<35; j+=1){
						var x = fn(i, j).x,
						y = fn(i, j).y;
						OBJ&#91;N++&#93; = o = new CObj(O , x, y);
						O = o;
					}
				}
				setInterval(function() {
					for (var i = 0; i < N; i++) OBJ&#91;i&#93;.run();
				}, 16);
			}
		}

		var CObj = function (p, cx, cy) {
			var obj = document.createElement("span");
			this.css = obj.style;
			this.css.position = "absolute";
			this.css.left = "-1000px";
			this.css.zIndex = 1000 - N;
			document.getElementById("screen").appendChild(obj);
			this.ddx = 0;
			this.ddy = 0;
			this.PX = 0;
			this.PY = 0;
			this.x = 0;
			this.y = 0;
			this.x0 = 0;
			this.y0 = 0;
			this.cx = cx;
			this.cy = cy;
			this.parent = p;
		}

		CObj.prototype.run = function () {
			if (!this.parent) {
				this.x0 = m.x;
				this.y0 = m.y;
			} else {
				this.x0 = this.parent.x;
				this.y0 = this.parent.y;
			}
			this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
			this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;
			this.css.left = Math.round(this.x) + 'px';
			this.css.top = Math.round(this.y) + 'px';
		}
		return init;
	}();
</script>
</head>
<body>

<div id="screen">
	<h3 id="demo">代码文章内容请移步<a href="http://www.dodobook.net/jquery/3035">==猛击这里==</a></h3>
</div>

<script type="text/javascript">
new Follow('screen', {
	speed: 4,
	animR : 2,
	fn : function (i, j) {
		return {
			x : j/4*Math.cos(i),
			y : j/4*Math.sin(i)
		}
	}
});
</script>

</body>
</html>