- <html>
- <head>
- <title>follow mouse</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: #fff;
- font-size: 0;
- overflow: hidden;
- width: 2px;
- height: 2px;
- }
- </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) {
- ee = 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[N++] = o = new CObj(O , x, y);
- O = o;
- }
- }
- setInterval(function() {
- for (var i = 0; i < N; i++) OBJ[i].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 {
- thisthis.x0 = this.parent.x;
- thisthis.y0 = this.parent.y;
- }
- thisthis.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;
- thisthis.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"></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>