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


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

    【可玩度不高的娱乐货】


    <!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%;
         
    100%;
        margin:
    0;
        padding:
    0;
    }
    #screen {
        background:#
    000;
        position: absolute;
         
    100%;
        height: 
    100%;
    }
    #screen span {
        background: #fff;
        font
    -size: 0;
        overflow: hidden;
         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
    感兴趣的童鞋可以看下。

  • 相关阅读:
    深入理解JavaScript闭包
    冒泡排序
    Objective-C中的self和super
    IOS中UIKit——UIButton的背景图像无法正常显示的原因
    IOS绘图——简单三角形
    NSDateFormatter中时间格式串的含义
    IOS屏幕布局
    IOS学习感想
    WWDC————苹果全球开发者大会
    刚开始学IOS遇到的类和方法
  • 原文地址:https://www.cnblogs.com/hongru/p/1945661.html
Copyright © 2020-2023  润新知