js之：漂浮线
(function initJParticle( $ ){ "use strict"; var createParticlesSandbox, Utils; Utils = {}; /* * Create jParticle animation. * @param {Object} options Few jParticle options. * @return {Object} jQuery object for chaining. */ $.fn.jParticle = function jParticle( options ){ this.each(function( _, el ){ if ( typeof el.sandbox === 'object' ) { $( el ).removeJParticle(); } el.sandbox = createParticlesSandbox( el, options ); }); return this; }; /* * Remove jParticle canvas. * @return {Object} jQuery object for chaining. */ $.fn.removeJParticle = function removeJParticle(){ this.each(function( _, el ){ if ( el.sandbox ) { el.sandbox.remove(); delete el.sandbox; } }); return this; }; /* * Freeze jParticle animation. * @return {Object} jQuery object for chaining. */ $.fn.freezeJParticle = function freezeJParticle(){ this.each(function( _, el ){ if ( el.sandbox ) { el.sandbox.freeze(); } }); return this; }; /* * Unfreeze jParticle animation. * @return {Object} jQuery object for chaining. */ $.fn.unfreezeJParticle = function unfreezeJParticle(){ this.each(function( _, el ){ if ( el.sandbox ) { el.sandbox.unfreeze(); } }); return this; }; /* * Create a particles sandbox instance. * @param {Object} element Element for the sandbox. * @param {Object} params Few sandbox's params. * @return {Object} Particles sandbox object. */ createParticlesSandbox = function createParticlesSandbox( element, params ){ var ParticlesSandbox, createParticle; ParticlesSandbox = {}; ParticlesSandbox.canvas = {}; ParticlesSandbox.mouse = {}; ParticlesSandbox.particles = []; ParticlesSandbox.isAnimated = false; /* * Initialize the sandbox * @param {Object} element Element for the sandbox. * @param {Object} params Few sandbox's params. */ ParticlesSandbox.initialize = function initialize( element, params ){ ParticlesSandbox.initParams( params ); ParticlesSandbox.initHTML( element ); ParticlesSandbox.initParticles(); ParticlesSandbox.initEvents(); ParticlesSandbox.initAnimation(); }; /* * Initialize sandbox's params. * @param {Object} params Few sandbox's params. */ ParticlesSandbox.initParams = function initParams( params ){ if ( params && params.color && (!params.particle || ( params.particle && !params.particle.color ) ) ) { if ( !params.particle ) { params.particle = {}; } params.particle.color = params.color; } ParticlesSandbox.params = $.extend({ particlesNumber: 100, linkDist: 50, createLinkDist: 150, disableLinks: false, disableMouse: false, background: 'black', color: 'white', width: null, height: null, linksWidth: 1 }, params ); }; /* * Initialize the sandbox's html. * @param {Object} element Element for the sandbox. */ ParticlesSandbox.initHTML = function initHTML( element ){ var canvas; canvas = ParticlesSandbox.canvas; canvas.container = $( element ); canvas.element = $('<canvas/>'); canvas.context = canvas.element.get(0).getContext('2d'); canvas.container.append( canvas.element ); canvas.element.css( 'display', 'block' ); canvas.element.get(0).width = ( ParticlesSandbox.params.width ) ? ParticlesSandbox.params.width : canvas.container.width(); canvas.element.get(0).height = ( ParticlesSandbox.params.height ) ? ParticlesSandbox.params.height : canvas.container.height(); canvas.element.css( 'background', ParticlesSandbox.params.background ); }; /* * Resize canvas. */ ParticlesSandbox.resize = function resize( width, height ){ if ( width ) { canvas.element.get(0).width = width; } if ( height ) { canvas.element.get(0).height = height; } }; /* * Create all particles in the sandbox. */ ParticlesSandbox.initParticles = function initParticles(){ var i, count; i = 0; count = ParticlesSandbox.params.particlesNumber; for ( ; i < count; i += 1 ) { ParticlesSandbox.particles.push( createParticle( ParticlesSandbox.canvas.element.get(0), ParticlesSandbox.params.particle ) ); } }; /* * Initialize the sandbox's events. */ ParticlesSandbox.initEvents = function initEvents(){ ParticlesSandbox.canvas.element.mouseenter(function mouseEnterCallback(){ ParticlesSandbox.mouse.hoverCanvas = true; if ( !ParticlesSandbox.isAnimated ) { ParticlesSandbox.draw(); } }); ParticlesSandbox.canvas.element.mouseleave(function mouseLeaveCallback(){ ParticlesSandbox.mouse.hoverCanvas = false; }); ParticlesSandbox.canvas.element.mousemove(function mouseMoveCallback(e){ ParticlesSandbox.mouse = $.extend( ParticlesSandbox.mouse, Utils.getMousePosition( e, ParticlesSandbox.canvas.element[0] ) ); }); }; /* * Initialize the sandbox's animation. */ ParticlesSandbox.initAnimation = function initAnimation(){ window.requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.ORequestAnimationFrame || window.msRequestAnimationFrame || function requestAnimFrame( callback ){ setTimeOut( callback, 1000/60 ); }; ParticlesSandbox.isAnimated = true; ParticlesSandbox.draw(); }; /* * Draw the sandbox canvas. */ ParticlesSandbox.draw = function draw(){ var i, j, count, canvas, particle, particle2; i = 0; count = ParticlesSandbox.particles.length; canvas = ParticlesSandbox.canvas; canvas.context.clearRect( 0, 0, canvas.element.get(0).width, canvas.element.get(0).height ); for ( ; i < count; i += 1 ) { particle = ParticlesSandbox.particles[i]; if ( ParticlesSandbox.isAnimated ) { particle.update(); } particle.draw(); if ( !ParticlesSandbox.params.disableMouse && ParticlesSandbox.mouse.hoverCanvas ) { ParticlesSandbox.drawLink( particle.getPosition('x'), particle.getPosition('y'), ParticlesSandbox.mouse.x, ParticlesSandbox.mouse.y ); } if ( !ParticlesSandbox.params.disableLinks ) { for ( j = i+1; j < count; j += 1 ) { particle2 = ParticlesSandbox.particles[j]; ParticlesSandbox.drawLink( particle.getPosition('x'), particle.getPosition('y'), particle2.getPosition('x'), particle2.getPosition('y') ); } } } ParticlesSandbox.requestID = window.requestAnimFrame( ParticlesSandbox.draw ); }; /* * Draw a link between two particles. * @param {int} x First object abscissa coords. * @param {int} y First object ordered coords. * @param {int} x2 Second object abscissa coords. * @param {int} y2 Second object ordered coords. */ ParticlesSandbox.drawLink = function drawLink( x, y, x2, y2 ){ var context; if ( Utils.getDistance( x, y, x2, y2 ) <= ParticlesSandbox.params.createLinkDist ) { context = ParticlesSandbox.canvas.context; context.save(); context.beginPath(); context.lineWidth = ParticlesSandbox.params.linksWidth; context.moveTo( x, y ); context.lineTo( x2, y2 ); context.globalAlpha = ParticlesSandbox.getOpacityLink( x, y, x2, y2 ); context.strokeStyle = ParticlesSandbox.params.color; context.lineCap = 'round'; context.stroke(); context.closePath(); context.restore(); } }; /* * Get opacity for link two particles. * @param {int} x First object abscissa coords. * @param {int} y First object ordered coords. * @param {int} x2 Second object abscissa coords. * @param {int} y2 Second object ordered coords. * @return {int} 0 <= opacity <= 1 */ ParticlesSandbox.getOpacityLink = function getOpacityLink( x, y, x2, y2 ){ var dist, opacity, linkDist, createLinkDist; dist = Utils.getDistance( x, y, x2, y2 ); linkDist = ParticlesSandbox.params.linkDist; createLinkDist = ParticlesSandbox.params.createLinkDist; if ( dist <= linkDist ) { opacity = 1; } else if ( dist > createLinkDist ) { opacity = 0; } else { opacity = 1 - ( ( ( dist - linkDist ) * 100 ) / ( createLinkDist - linkDist ) ) / 100; } return opacity; }; /* * Freeze the animation. */ ParticlesSandbox.freeze = function freeze(){ if ( ParticlesSandbox.isAnimated ) { ParticlesSandbox.isAnimated = false; } }; /* * Unfreeze the animation. */ ParticlesSandbox.unfreeze = function unfreeze(){ if ( !ParticlesSandbox.isAnimated ) { ParticlesSandbox.isAnimated = true; } }; /* * Remove the animation's canvas. */ ParticlesSandbox.remove = function remove(){ ParticlesSandbox.canvas.element.remove(); }; /* * Create a particle instance. * @param {Object} canvas DOM element. * @param {Object} params Few particle's params. * @return {Object} Particle object. */ createParticle = function createParticle( canvas, params ){ var Particle; Particle = {}; Particle.canvas = {}; Particle.vector = {}; /* * Initialize the particle. * @param {Object} canvas DOM element. * @param {Object} params Few particle's params. */ Particle.initialize = function initialize( canvas, params ){ Particle.params = $.extend({ color: 'white', minSize: 2, maxSize: 4, speed: 60 }, params ); Particle.setCanvasContext( canvas ); Particle.initSize(); Particle.initPosition(); Particle.initVectors(); }; /* * Initialize particle's position. */ Particle.initPosition = function initPosition(){ Particle.x = Utils.getRandNumber( 0 + Particle.radius, Particle.canvas.element.width - Particle.radius ); Particle.y = Utils.getRandNumber( 0 + Particle.radius, Particle.canvas.element.height - Particle.radius ); }; /* * Initialize particle's size. */ Particle.initSize = function initSize(){ Particle.size = Utils.getRandNumber( Particle.params.minSize, Particle.params.maxSize ); Particle.radius = Particle.size / 2; }; /* * Initialize particle's vectors for speed. */ Particle.initVectors = function initVectors(){ do { Particle.vector.x = Utils.getRandNumber( -Particle.params.speed / 60, Particle.params.speed / 60, false ); Particle.vector.y = Utils.getRandNumber( -Particle.params.speed / 60, Particle.params.speed / 60, false ); } while ( Particle.vector.x == 0 || Particle.vector.y == 0 ) }; /* * Set the context to draw particles. * @param {Object} canvas Canvas. */ Particle.setCanvasContext = function setCanvasContext( canvas ){ var context; Particle.canvas.element = canvas; context = canvas.getContext('2d'); if ( typeof context === 'object' && typeof context.canvas === 'object' ) { Particle.canvas.context = context; } else { throw "Error: Can't set canvas context to Particle because context isn't a CanvasRenderingContext2D object."; } }; /* * Draw particle. */ Particle.draw = function draw(){ var context = Particle.canvas.context; context.beginPath(); context.arc( Particle.x, Particle.y, Particle.size /2, 0, Math.PI*2 ); context.fillStyle = Particle.params.color; context.fill(); context.closePath(); }; /* * Update the particle's position. */ Particle.update = function update(){ Particle.x += Particle.vector.x; Particle.y += Particle.vector.y; if ( 0 > ( Particle.x - Particle.radius ) || ( Particle.x + Particle.radius ) > Particle.canvas.element.width ) { Particle.vector.x = -Particle.vector.x; } if ( 0 > ( Particle.y - Particle.radius ) || ( Particle.y + Particle.radius ) > Particle.canvas.element.height ) { Particle.vector.y = -Particle.vector.y; } }; /* * Return position of particle. * @param {string} axis Optionnal axis. * @return {int|Object} Return object if axis is not defined, else return int. */ Particle.getPosition = function getPosition( axis ){ if ( typeof axis === 'string' && ( axis != 'x' && axis != 'y' ) ) { axis = null; } return ( typeof( axis ) === 'string' ) ? Particle[ axis ] : { x: Particle.x, y: Particle.y }; }; Particle.initialize( canvas, params ); return { getPosition: Particle.getPosition, update: Particle.update, draw: Particle.draw }; }; ParticlesSandbox.initialize( element, params ); return { remove: ParticlesSandbox.remove, freeze: ParticlesSandbox.freeze, unfreeze: ParticlesSandbox.unfreeze, resize: ParticlesSandbox.resize }; }; /* * Get rand number between x and y. * @param {int} x Minimal number. * @param {int} y Maximal number. * @param {Boolean} round True is value shouldn't be round. * @return {int} Rand number. */ Utils.getRandNumber = function getRandNumber( x, y, round ){ var value; if( x == null ) { x = 0; } if( y == null ) { y = 10; } if( round == null ) { round = true; } value = Math.random() * ( y - x ) + x; return ( round ) ? Math.round( value ) : value; }; /* * Get distance between to cartesian points. * @param {int} x First object abscissa coords. * @param {int} y First object ordered coords. * @param {int} x2 Second object abscissa coords. * @param {int} y2 Second object ordered coords. * @return {int} Distance. */ Utils.getDistance = function getDistance( x, y, x2, y2 ){ return Math.sqrt( Math.pow( x2 - x, 2 ) + Math.pow( y2 - y, 2 ) ); }; /* * Get mouse position. * @param {Object} event The HTML DOM events. * @param {Object} element The DOM element. * @return {Object} x/y position. */ Utils.getMousePosition = function getMousePosition( event, element ){ var rect; if ( typeof element === 'undefined' ) { element = $('body')[0]; } rect = element.getBoundingClientRect(); return { x: event.clientX - rect.left, y: event.clientY - rect.top }; }; })( jQuery )
调用方法：
html：
<div class="layui-canvs"></div>
js：
$(".layui-canvs").jParticle({
background: "#141414",
color: "#E6E6E6"
});
注意：需要先设置 canvas的宽高
