叶落为重生每片落下的叶子都是为了下一次的涅槃...^_^

我依旧喜欢折腾浏览器...

编码可以是一种工作,也可以是一种娱乐。
在工作之余,每个人都有自己放松的方式,玩电动,打游戏,看书,听音乐...
我也一样,喜欢看看电影,玩玩游戏,听听音乐放松自己。
不过,在某些时候,编码也可以是一种娱乐。娱乐的工具,一个记事本,一个浏览器... 你可以狠狠的折腾浏览器,发泄你心中的不满。

【可玩度不高的娱乐货】


<!DOCTYPE HTML> 
<html> 
<head> 
<title>follow mouse</title> 
<meta name="Author" content="hongru.chen"> 

<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) {
                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(null00);
            
for(var i=0;i<360;i+=10){
                
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;
        $(
"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"></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> 

 

 

你可以改改实例化的参数fn,看看有木有其他的图形出现。
这里有个常用的数学函数公式传送门:http://www-history.mcs.st-andrews.ac.uk/Curves/Curves.html
感兴趣的童鞋可以看下。

posted on 2011-01-26 17:09  岑安  阅读(7264)  评论(54编辑  收藏  举报

导航