用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

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

2016-04-16 作者: JS举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JS打造的跟随鼠标移动的小星星组成的图案丨芯晴网页特效丨CsrCode.Cn</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <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+=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 {
    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>


网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...