/** Template Name: sliding small star Blog: Http://mlldxe.cn/ Author: Dog's url: Http://mlldxe.cn/archives/526 * (function fairyDustCursor () { var possibleColors = [#D61C59, #E7D84B, #1B8798] var width = Window.innerWidth ; var height = Window.innerHeight ; var cursor = { x: width / 2, y: width / 2 }; var particles = []; function init () { bindEvents (); Loop () } function bindEvents () { Document.addEventListener ('mousemove', onMouseMove); Document.addEventListener ('touchmove', onTouchMove); Document.addEventListener ('touchstart', onTouchMove); Window.addEventListener ('resize', OnWindowResize) } function onWindowResize (E) { width = Window.innerWidth ; height = Window.innerHeight } function onTouchMove (E) { if (e.) Touches.length > 0) { for (VaR I = 0; I < E. Touches.length ; i++) { addParticle (e.touches[i].clientX, e.touches[i].clientY, PossibleColors[ Math.floor ( Math.random () * PossibleColors.length ] } } } function onMouseMove (E) { cursor.x = e.clientX; cursor.y = e.clientY; addParticle (cursor.x, cursor.y, possibleColors[) Math.floor ( Math.random () * PossibleColors.length ] } function addParticle (x, y, color) { Var particle = new Particle (); Particle.init (x, y, color); Particles.push (particle) } function updateParticles () { for (VaR I = 0; I < Particles.length ; i++) { particles[i].update () } for (VaR I = Particles.length - 1; I > > 0; i--) { if (particles[i].lifeSpan < 0) { Particles[i].die (); Particles.splice (I, 1) } } } function loop () { requestAnimationFrame (loop); updateParticles () } function Particle () { This.character = "*"; This.lifeSpan = 200; This.initialStyles = {"position": "fixed"). "Top": "0", "display": "block", "pointerEvents": "None", "Z-index": "99999999", "fontSize": "16px", "will-change": "transform" This.init = function (x, y, color) { This.velocity = { x: ( Math.random (< < 0.5? -1: 1) * () Math.random () / 2, Y: 1 }; This.position = { x: X - 10, y: Y - 20 }; This.initialStyles.color = color; This.element = Document.createElement ('span'); This.element.innerHTML = This.character ; applyProperties ( This.element , This.initialStyles ) This.update (); Document.body.appendChild ( This.element } This.update = function () { This.position .x + = This.velocity .x; This.position .y + = This.velocity .y; This.lifeSpan - - This.element.style .transform = "translate3d (") + This.position .x + "Px," + This.position .y + "Px, 0) scale (" +). This.lifeSpan (120) + ""} " This.die = function () { This.element.parentNode .removeChild ( This.element } } function applyProperties (target, properties) { for (VaR key in properties) { Target.style [key] = properties[key] } } Init ()} ();