function kejixian(parent,child) { var width, height, largeheader, canvas, ctx, points, target, animateheader = true; initheader(); initanimation(); addlisteners(); function initheader() { width = window.innerwidth; height = window.innerheight; target = {x: width/2, y: height/2}; largeheader = document.getelementbyid(parent); largeheader.style.height = height+'px'; canvas = document.getelementbyid(child); canvas.width = width; canvas.height = height; ctx = canvas.getcontext('2d'); // create points points = []; for(var x = 0; x < width; x = x + width/15) { for(var y = 0; y < height; y = y + height/15) { var px = x + math.random()*width/15; var py = y + math.random()*height/15; var p = {x: px, originx: px, y: py, originy: py }; points.push(p); } } // for each point find the 5 closest points for(var i = 0; i < points.length; i++) { var closest = []; var p1 = points[i]; for(var j = 0; j < points.length; j++) { var p2 = points[j] if(!(p1 == p2)) { var placed = false; for(var k = 0; k < 5; k++) { if(!placed) { if(closest[k] == undefined) { closest[k] = p2; placed = true; } } } for(var k = 0; k < 5; k++) { if(!placed) { if(getdistance(p1, p2) < getdistance(p1, closest[k])) { closest[k] = p2; placed = true; } } } } } p1.closest = closest; } // assign a circle to each point for(var i in points) { var c = new circle(points[i], 2+math.random()*2, 'rgba(255,255,255,0.3)'); points[i].circle = c; } } // event handling function addlisteners() { if(!('ontouchstart' in window)) { window.addeventlistener('mousemove', mousemove); } window.addeventlistener('scroll', scrollcheck); window.addeventlistener('resize', resize); } function mousemove(e) { var posx = posy = 0; if (e.pagex || e.pagey) { posx = e.pagex; posy = e.pagey; } // else if (e.clientx || e.clienty) { // posx = e.clientx + document.body.scrollleft + document.documentelement.scrollleft; // posy = e.clienty + document.body.scrolltop + document.documentelement.scrolltop; // } target.x = posx; // target.y = posy; } function scrollcheck() { if(document.body.scrolltop > height) animateheader = true; else animateheader = true; } function resize() { width = window.innerwidth; height = window.innerheight; largeheader.style.height = height+'px'; canvas.width = width; canvas.height = height; } // animation function initanimation() { animate(); for(var i in points) { shiftpoint(points[i]); } } function animate() { if(animateheader) { ctx.clearrect(0,0,width,height); for(var i in points) { // detect points in range if(math.abs(getdistance(target, points[i])) <4000) { points[i].active = 0.3; points[i].circle.active = 0.6; } else if(math.abs(getdistance(target, points[i])) <20000) { points[i].active = 0.1; points[i].circle.active = 0.3; } else if(math.abs(getdistance(target, points[i])) <40000) {//控制显示线的范围 points[i].active = 0.02; points[i].circle.active = 0.1; } else { points[i].active = 0; points[i].circle.active = 0; } drawlines(points[i]); points[i].circle.draw(); } } requestanimationframe(animate); } function shiftpoint(p) { tweenlite.to(p, 1+1*math.random(), {x:p.originx-50+math.random()*100, y: p.originy-50+math.random()*100, ease:circ.easeinout, oncomplete: function() { shiftpoint(p); }}); } // canvas manipulation function drawlines(p) { if(!p.active) return; for(var i in p.closest) { ctx.beginpath(); ctx.moveto(p.x, p.y); ctx.lineto(p.closest[i].x, p.closest[i].y); ctx.strokestyle = 'rgba(190,190,190,'+ p.active+')'; ctx.stroke(); } } function circle(pos,rad,color) { var _this = this; // constructor (function() { _this.pos = pos || null; _this.radius = rad || null; _this.color = color || null; })(); this.draw = function() { if(!_this.active) return; ctx.beginpath(); ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * math.pi, false); ctx.fillstyle = 'rgba(160,160,160,'+ _this.active+')'; ctx.fill(); }; } // util function getdistance(p1, p2) { return math.pow(p1.x - p2.x, 2) + math.pow(p1.y - p2.y, 2); } };