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

最新推荐文章于 2025-09-12 16:56:45 发布

weixin_30438813

最新推荐文章于 2025-09-12 16:56:45 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：http://www.cnblogs.com/hongru/archive/2011/01/26/1945661.html

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

【可玩度不高的娱乐货】
<!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> </head> <body> <div id="screen"></div> </body> </html>

<! 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( null , 0 , 0 );
             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
感兴趣的童鞋可以看下。

转载于:https://www.cnblogs.com/hongru/archive/2011/01/26/1945661.html