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

  •   
  • 3848
  • jQuery
  • 9
  • super_dodo
  • 2016/09/19

今天想继续打造改造一下跟随鼠标移动的动画的效果,无意间浏览到一个很不错的js效果,动感十足,Mark转载记录一下.效果如下,欢迎各位改造体验.直接上示意图和代码段.

===猛戳体验地址===

===猛戳体验地址===

js_mouse_move_star

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JS打造的跟随鼠标移动的小星星组成的图案</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:#77CE00;font-size:0;overflow:hidden;width:2px;height:2px;}
        h3#demo{color:#ff5800;text-align:center;font-family:"Microsoft Yahei";font-size:20px;padding:20px;}
    </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&#91;N++&#93; = o = new CObj(O , x, y);
                        O = o;
                    }
                }
                setInterval(function() {
                    for (var i = 0; i < N; i++) OBJ&#91;i&#93;.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">
    <h3 id="demo">代码文章内容请移步<a href="http://www.dodobook.net/jquery/3035">==猛击这里==</a></h3>
</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>