JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
(function() {
if ("performance" in window == false) {
window.performance = {};
}
Date.now = (Date.now || function() { // thanks IE8
return new Date().getTime();
});
if ("now" in window.performance == false) {
var nowOffset = Date.now();
if (performance.timing && performance.timing.navigationStart) {
nowOffset = performance.timing.navigationStart
}
window.performance.now = function now() {
return Date.now() - nowOffset;
}
}
})();
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
;
(function($, window, document, undefined) {
"use strict";
var pluginName = "popCircle",
defaults = {
renderMode: '2d', // 2d, webgl
color1: '#445566',
color2: null,
fadeIntensity: 50, // amount to fade the dots by the area's edge
fadeInverse: false,
fadeSize: 1,
fadeType: 'linear', //linear or radial
fadeDirection: 45, // "Direction" for linear, "CenterX/Y" for radial
fadeCenterX: 80, // percentage value
fadeCenterY: 70, // percentage value
waveType: 'linear', //linear or radial
waveCenterX: 25, // percentage value
waveCenterY: 40, // percentage value
waveDirection: 135,
waveSpeed: 400, // time to transition full area, in ms
gradientDirection: 270,
gradientCenterX: 80, // percentage value
gradientCenterY: 70, // percentage value
gradientSize: 1, // 0-3
minRadius: 0,
maxRadius: 14,
background: '#777',
backgroundFadeSpeed: 500,
overlap: 1,
panSpeedX: 1,
panSpeedY: 1,
pulseCenterX: 50,
pulseCenterY: 100,
pulseDuration: 600,
pulseStrength: 4,
pulseSpeed: 500,
pulseColor: '#EEEEEE'
};
function PopColor() {}
PopColor.prototype = {
// With massive amounts of thanks to
// http://stackoverflow.com/questions/5560248/programmatically-lighten-or-darken-a-hex-color-or-rgb-and-blend-colors
// for the truly remarkable function
blendColors: function(c0, c1, p) {
var f = parseInt(c0.slice(1), 16),
t = parseInt(c1.slice(1), 16),
R1 = f >> 16,
G1 = f >> 8 & 0x00FF,
B1 = f & 0x0000FF,
R2 = t >> 16,
G2 = t >> 8 & 0x00FF,
B2 = t & 0x0000FF;
return "#" + (0x1000000 + (Math.round((R2 - R1) * p) + R1) * 0x10000 + (Math.round((G2 - G1) * p) + G1) * 0x100 + (Math.round((B2 - B1) * p) + B1)).toString(16).slice(1);
},
// thanks to https://github.com/ondras/rot.js
interpolateColor: function(color1, color2, factor) {
if (arguments.length < 3) {
factor = 0.5;
}
var result = this._h2r(color1).slice();
for (var i = 0; i < 3; i++) {
result[i] = Math.round(result[i] + factor * (this._h2r(color2)[i] - this._h2r(color1)[i]));
}
return this._r2h(result);
},
// Converts a #ffffff hex string into an [r,g,b] array
_h2r: function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? [
parseInt(result[1], 16),
parseInt(result[2], 16),
parseInt(result[3], 16)
] : null;
},
// inverse
_r2h: function(rgb) {
return "#" + ((1 << 24) + (rgb[0] << 16) + (rgb[1] << 8) + rgb[2]).toString(16).slice(1);
},
}
function PopCirc(x, y, limit, delay) {
this.x = x;
this.y = y;
this.pos = {
x: x,
y: y
};
this.settings = {};
this.container = null;
this.index = 0;
this.radius = 0;
this.startRadius = 0;
this.endRadius = 0;
this.context = false;
this.color = '#555555';
this.color2 = null; // for gradient
this.calculatedColor = '#000000';
this.expanding = true;
this.resetCallback = null;
// callback when a circle has finished animating
this.completeCallback = null;
this.reverse = false;
// determine how far "along" the gradient line this circle is
this.gradientPosition = 0.5;
this.fade = 0;
this.age = 0;
this.delay = 0;
this.delayFunction = null;
this.colorFunction = null;
this.positionFunction = null;
this.radiusFunction = null;
this.stopped = false;
this.prevTime = null;
this.totalFrames = 32;
this.totalFramesOut = 20;
this.startTime = null;
this.sprite = null;
};
PopCirc.prototype = {
constructor: PopCirc,
getPosition: function() {
return this.pos;
},
transition: function(reverse, callback) {
this.reverse = reverse;
this.completeCallback = callback;
this.startTime = window.performance.now();
this.frame = 0;
},
applySettings: function(settings) {
this.settings = settings;
},
setColor: function(color, color2) {
this.color1 = color2;
this.color2 = color2;
},
setDelay: function(delay) {
this.delay = delay;
},
setDelayFunction: function(fn) {
this.delayFunction = fn;
},
setFadeFunction: function(fn) {
this.fadeFunction = fn;
},
setFade: function(fade) {
if (fade > 1) {
fade = 1;
} else if (fade < 0) {
fade = 0;
}
this.fade = fade;
},
setColorFunction: function(fn) {
this.colorFunction = fn;
},
setGradientFunction: function(fn) {
this.gradientFunction = fn;
},
setPositionFunction: function(fn) {
this.positionFunction = fn;
},
setRadiusFunction: function(fn) {
this.radiusFunction = fn;
},
setPulseFunction: function(fn) {
this.pulseFunction = fn;
},
// TODO: combine overlap and fade into radiusFunction
/*setOverlap: function(overlap) {
if(overlap <= 0) {
overlap = 0;
}
this.overlap = overlap;
},*/
hashCode: function(str) { // java String#hashCode
var hash = 0;
for (var i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
},
intToRGB: function(i) {
var c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
},
easeOut: function(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (-20.5925 * tc * ts + 48.8825 * ts * ts + -37.585 * tc + 10.595 * ts + -0.3 * t);
},
easeIn: function(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (-20.5925 * tc * ts + 48.8825 * ts * ts + -37.585 * tc + 10.595 * ts + -0.3 * t);
},
setPixel: function(imageData, x, y, r, g, b, a) {
var index = (x + y * imageData.width) * 4;
imageData.data[index + 0] = r;
imageData.data[index + 1] = g;
imageData.data[index + 2] = b;
imageData.data[index + 3] = a;
},
step: function(ctx, t) {
if (!this.sprite && this.settings['renderMode'] == 'webgl') {
this.sprite = new PIXI.Sprite(this.container.texture);
this.container.particle_container.addChild(this.sprite);
}
this.pos = this.positionFunction(this, t);
if (!this.startTime) {
this.startTime = window.performance.now();
}
if (t == 0) {
return;
}
// Method 1
if (this.container.settings['renderMode'] == '2d') {
ctx.beginPath();
var r = this.radiusFunction(this, t);
if (r > 0) {
ctx.arc(
this.getPosition().x,
this.getPosition().y,
r,
0,
2 * Math.PI,
false);
}
ctx.fillStyle = this.colorFunction(this, t);
ctx.fill();
} else {
// render using the webgl canvas
var r = this.radiusFunction(this, t);
this.sprite.width = r * 2;
this.sprite.height = r * 2;
this.sprite.position.x = this.getPosition().x - r;
this.sprite.position.y = this.getPosition().y - r;
if (this.frame % 3 == 0) {
this.calculatedColor = this.colorFunction(this, t);
}
this.sprite.tint = parseInt(this.calculatedColor.replace('#', '0x'));
}
if (this.delayFunction(this, t - this.startTime) && this.frame <= this.totalFrames) {
this.frame++;
}
if (this.frame >= this.totalFrames) {
if (typeof this.completeCallback === "function") {
this.completeCallback(this);
}
}
}
}
// The actual plugin constructor
function Plugin(element, options) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
// Avoid Plugin.prototype conflicts
$.extend(Plugin.prototype, {
popCircs: [],
context: null,
canvas: null,
animating: false,
width: 0,
height: 0,
pulseTime: 0,
stats: null,
stage: null,
texture: null,
renderer: null,
sourceCanvas: null,
sourceImage: null,
sourceCanvasElement: null,
init: function() {
var $this = $(this.element);
this.height = $this.height();
this.width = $this.width();
// setup the canvas
$this.css('background', 'transparent');
$this.css('position', 'relative');
this.canvas = $('');
this.canvas.css({
position: 'absolute',
left: '0px',
top: '0px',
zIndex: '-1',
background: '#555'
});
$this.append(this.canvas);
if (this.settings['renderMode'] == '2d') {
this.context = this.canvas.get(0).getContext("2d");
}
var y = Math.round(this.height / this.settings['maxRadius']);
// new radius, designed to fit exactly into height
var radius = this.height / y;
var count = 0;
function _delayFunction(c, t) {
var waveCenterX = c.settings['waveCenterX'] / 100;
var waveCenterY = c.settings['waveCenterY'] / 100;
var a = waveCenterX - c.getPosition().x / c.container.width;
var b = waveCenterY - c.getPosition().y / c.container.height;
var dist = Math.sqrt(a * a + b * b);
// calculate percentage value of canvas size
//console.log(dist);
return t > (dist * c.settings['waveSpeed']);
}
// fade, as a function of position (move to radius)
function _fadeFunction(c, t) {
var fadeCenterX = c.settings['fadeCenterX'] / 100;
var fadeCenterY = c.settings['fadeCenterY'] / 100;
var a = fadeCenterX - c.positionFunction(c, t).x / c.container.width;
var b = fadeCenterY - c.positionFunction(c, t).y / c.container.height;
var dist = Math.sqrt(a * a + b * b) * c.settings['fadeSize'];
// apply the intensity factor (0 - 1)
dist = 1 - c.settings['fadeIntensity'] * dist;
//console.log(dist);
if (c.settings['fadeInverse'] == 1) {
return 1 - dist;
} else {
return dist;
}
}
// radius as a function of time and position
function _radiusFunction(c, t) {
var r;
if (!c.reverse) {
r = c.easeIn(c.frame,
c.settings['minRadius'],
c.settings['maxRadius'] * c.fadeFunction(this, t) * c.settings['overlap'],
c.totalFrames);
} else {
r = c.settings['maxRadius'] * c.fadeFunction(this, t) * c.settings['overlap'] - c.easeOut(
c.frame,
c.settings['minRadius'],
c.settings['maxRadius'] * c.fadeFunction(this, t) * c.settings['overlap'],
c.totalFrames);
}
r = r + c.pulseFunction(c, t);
return r > 0 ? r : 0;
//todo: implement "fade" and "overlay" here
}
function _positionFunction(c, t) {
var dx = (t / c.settings['panSpeedX']) * c.settings['maxRadius'] * 2;
var dy = (t / c.settings['panSpeedY']) * c.settings['maxRadius'] * 2
dx = dx % (c.settings['maxRadius'] * 2);
dy = dy % (c.settings['maxRadius'] * 2);
return {
x: c.x + dx,
y: c.y + dy
};
}
function _colorFunction(c, t) {
var gradientCenterX = c.settings['gradientCenterX'] / 100;
var gradientCenterY = c.settings['gradientCenterY'] / 100;
var Color = new PopColor;
if (c.settings['color2']) {
var a = gradientCenterX - c.getPosition().x / c.container.width;
var b = gradientCenterY - c.getPosition().y / c.container.height;
var dist = Math.sqrt(a * a + b * b);
//console.log(dist);
var grad = dist * 2 / c.settings['gradientSize'];
if (grad > 1) {
grad = 1;
}
var color = Color.interpolateColor(c.settings['color1'], c.settings['color2'], grad);
} else {
var color = c.settings['color1'];
}
// add an additional color param based on amplitude of pulse
var amp = c.pulseFunction(c, t) / c.settings['pulseStrength'];
color = Color.blendColors(color, c.settings['pulseColor'], amp);
return color;
}
function _pulseFunction(c, t) {
var pulseCenterX = c.settings['pulseCenterX'] / 100;
var pulseCenterY = c.settings['pulseCenterY'] / 100;
var a = pulseCenterX - c.getPosition().x / c.container.width;
var b = pulseCenterY - c.getPosition().y / c.container.height;
var dist = Math.sqrt(a * a + b * b);
// delay is equal to the distance between the centre and this circle
// as a proportion of the screen size
var delay = dist * c.settings['pulseSpeed'];
// calculate td - the time that has passed since the pulse started at this circle
// add on "delay" to accomodate the extra time this circle has to wait before it begins
var td = t - c.container.pulseTime - delay;
if (td < 0 || td > c.settings['pulseDuration']) {
// pulse has ended
return 0;
}
// SIN based. Todo: plug into easing functions
var amp = (1 - (dist / 1.5)) * Math.sin(Math.PI * td / c.settings['pulseDuration']) * c.settings['pulseStrength'];
return amp;
}
//this.stage.setInteractive(true);
for (var i = -1; i < this.width / (radius * 2) + 1; i++) {
for (var j = -1; j < y + 1; j++) {
var circle = new PopCirc(i * radius * 2 + (radius / 2), j * radius * 2 + (radius / 2));
//this.stage.addChild(circle.graphics);
circle.index = count;
circle.container = this;
circle.setDelayFunction(_delayFunction);
circle.setFadeFunction(_fadeFunction);
circle.setColorFunction(_colorFunction);
circle.setPositionFunction(_positionFunction);
circle.setRadiusFunction(_radiusFunction);
circle.setPulseFunction(_pulseFunction);
// define the minimum and maximum radius for the circles
//circle.transition(this.settings['minRadius'], radius, false);
circle.applySettings(this.settings);
this.popCircs.push(circle);
count++;
}
}
if (this.settings['renderMode'] == 'webgl') {
this.stage = new PIXI.Stage(0x666666, true);
this.renderer = PIXI.autoDetectRenderer(this.width, this.height, null, false, true);
var amount = (this.renderer instanceof PIXI.WebGLRenderer) ? 100 : 5;
console.log(amount);
if (amount == 5) {
this.renderer.context.mozImageSmoothingEnabled = false
this.renderer.context.webkitImageSmoothingEnabled = false;
}
this.renderer.view.style["transform"] = "translatez(0)";
this.renderer.view.style.position = "absolute";
document.body.appendChild(this.renderer.view);
this.texture = new PIXI.Texture.fromImage("circle.png");
this.particle_container = new PIXI.DisplayObjectContainer();
//this.particle_container = new PIXI.ParticleContainer();
this.stage.addChild(this.particle_container);
}
//console.log(j);
//this.animate();
},
pulse: function() {
this.pulseTime = window.performance.now();
},
update: function(options) {
// update a setting
if (options.hasOwnProperty('name') && options.hasOwnProperty('value')) {
if (options.name == 'background') {
this.canvas.css({
'transition': 'background-color ' + (this.settings['backgroundFadeSpeed'] / 1000) + 's',
'background-color': options.value
});
} else {
this.settings[options.name] = options.value;
for (var i in this.circles) {
var circle = this.circles[i];
circle.settings[options.name] = options.value;
}
}
}
},
trigger: function(options) {
var _this = this;
this.settings = $.extend({}, this._defaults, options);
// todo: validate all settings!!
var count = 1;
this.triggerTime = window.performance.now();
this.canvas.css({
'transition': 'background-color ' + (this.settings['backgroundFadeSpeed'] / 1000) + 's',
'background-color': this.settings['background']
});
if (this.settings['renderMode'] == 'webgl') {
this.renderer.backgroundColor = parseInt(this.settings['background'].replace('#', '0x'));
}
for (var i in this.popCircs) {
var c = this.popCircs[i];
c.transition(true, function(c) {
c.applySettings(_this.settings);
c.transition(false);
});
count++;
}
if (!this.animating) {
this.animate();
}
},
prevt: 0,
animate: function() {
var _this = this;
// start the process
function animateStep(t) {
if (_this.settings['renderMode'] == '2d') {
_this.context.clearRect(0, 0, _this.canvas.width(), _this.canvas.height());
}
// see: http://jsperf.com/improving-clear-canvas
for (var i in _this.popCircs) {
var c = _this.popCircs[i];
c.step(_this.context, t);
}
if (_this.settings['renderMode'] == 'webgl') {
_this.renderer.render(_this.stage);
}
requestAnimationFrame(animateStep);
_this.prevt = t;
}
this.animating = true;
animateStep(0);
}
});
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function(call, params) {
return this.each(function() {
if (call && $.data(this, "plugin_" + pluginName)) {
var instance = $.data(this, "plugin_" + pluginName);
if (call == 'trigger') {
instance['trigger'](params);
} else if (call == 'pulse') {
instance['pulse']();
} else if (call == 'update') {
instance['update'](params);
} else {
// no function defined
}
} else if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, call));
}
});
};
})(jQuery, window, document);
String.prototype.toUnderscore = function() {
return this.replace(/([A-Z])/g, function($1) {
return "_" + $1.toLowerCase();
});
};
String.prototype.toCamel = function() {
return this.toLowerCase().replace(/_(.)/g, function(match, group1) {
return group1.toUpperCase();
});
}
$(function() {
//It's a reflektor...
var Reflector = function(obj) {
this.getProperties = function() {
var properties = [];
for (var prop in obj) {
if (typeof obj[prop] != 'function' && typeof obj[prop] != 'undefined') {
properties.push(prop + ': \'' + obj[prop] + '\'');
}
}
return properties;
};
}
var circ = $('.pop-this').popCircle();
//circ.popCircle('trigger');
$('.trigger').on('click', function() {
$('.pop-this h1').slideDown(function() {
$(this).html('Green!');
$(this).css('color', '#FFF');
$(this).slideUp(500);
}, 1000);
var settings = {
color1: $('.color1').val(),
color2: $('.color2').val(),
background: $('.background').val(),
backgroundFadeSpeed: $('.background_fade_speed').val(),
waveDirection: $('.wave_direction').val(),
waveSpeed: $('.wave_speed').val(),
fadeDirection: $('.fade_direction').val(),
fadeCenterX: $('.fade_center_x').val(),
fadeCenterY: $('.fade_center_y').val(),
gradientCenterX: $('.gradient_center_x').val(),
gradientCenterY: $('.gradient_center_y').val(),
gradientSize: $('.gradient_size').val(),
waveCenterX: $('.wave_center_x').val(),
waveCenterY: $('.wave_center_y').val(),
gradientDirection: $('.gradient_direction').val(),
fadeIntensity: $('.fade_intensity').val(),
fadeSize: $('.fade_size').val(),
fadeInverse: $('.invert_fade').val(),
overlap: $('.overlap').val(),
panSpeedX: $('.pan_speed_x').val(),
panSpeedY: $('.pan_speed_y').val(),
// TODO: adjust pan speed etc. only after callback of "circle complete"
//
pulseCenterX: $('.pulse_center_x').val(),
pulseCenterY: $('.pulse_center_y').val(),
pulseDuration: $('.pulse_duration').val(),
pulseStrength: $('.pulse_strength').val(),
pulseSpeed: $('.pulse_speed').val(),
pulseColor: $('.pulse_color').val(),
};
var reflector = new Reflector(settings);
$('.dump').html('{
' + reflector.getProperties().join(',
') + '
}');
circ.popCircle('trigger', settings);
});
$('.trigger').triggerHandler('click');
$('.pulse').on('click', function() {
circ.popCircle('pulse');
});
var presets = {
'Deep Blue Something': {
color1: '#0d1c55',
color2: '#122452',
background: '#09396f',
backgroundFadeSpeed: '250',
waveSpeed: '250',
fadeCenterX: '70',
fadeCenterY: '55',
gradientCenterX: '25',
gradientCenterY: '50',
gradientSize: '0.4',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '0',
fadeSize: '0.75',
overlap: '1.25',
panSpeedX: '500',
panSpeedY: '2000',
pulseCenterX: '75',
pulseCenterY: '50',
pulseDuration: '5000',
pulseStrength: '10',
pulseSpeed: '2500',
pulseColor: '#0075bb'
},
'Moonlight': {
color1: '#ddfff1',
color2: '#06091c',
background: '#070725',
backgroundFadeSpeed: '6000',
waveSpeed: '250',
fadeCenterX: '10',
fadeCenterY: '10',
gradientCenterX: '70',
gradientCenterY: '35',
gradientSize: '0.5',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '2',
fadeSize: '0.5',
overlap: '1',
panSpeedX: '-5000',
panSpeedY: '8000',
pulseCenterX: '100',
pulseCenterY: '100',
pulseDuration: '250',
pulseStrength: '4',
pulseSpeed: '4000',
pulseColor: '#e1faff'
},
'COPS!': {
color1: '#e80000',
color2: '#0b0b0f',
background: '#070a14',
backgroundFadeSpeed: '250',
waveSpeed: '250',
fadeCenterX: '70',
fadeCenterY: '55',
gradientCenterX: '25',
gradientCenterY: '50',
gradientSize: '0.4',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '0.75',
fadeSize: '0.75',
overlap: '1',
panSpeedX: '500',
panSpeedY: '2000',
pulseCenterX: '75',
pulseCenterY: '50',
pulseDuration: '200',
pulseStrength: '10',
pulseSpeed: '500',
pulseColor: '#0630f2'
},
'Stop The Ride I Want To Get Off': {
color1: '#fe3838',
color2: '#fefdfc',
background: '#6b9def',
backgroundFadeSpeed: '1500',
waveSpeed: '250',
fadeCenterX: '70',
fadeCenterY: '55',
gradientCenterX: '30',
gradientCenterY: '40',
gradientSize: '1',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '1.5',
fadeSize: '1.5',
overlap: '1',
panSpeedX: '75',
panSpeedY: '100000',
pulseCenterX: '0',
pulseCenterY: '50',
pulseDuration: '500',
pulseStrength: '10',
pulseSpeed: '1250',
pulseColor: '#afe01b'
},
'Vanilla Sky': {
color1: '#aad3f2',
color2: '#e2baf3',
background: '#eaf9ff',
backgroundFadeSpeed: '2500',
waveSpeed: '250',
fadeCenterX: '70',
fadeCenterY: '55',
gradientCenterX: '80',
gradientCenterY: '35',
gradientSize: '1.5',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '0.75',
fadeSize: '1.5',
overlap: '2',
panSpeedX: '-5000',
panSpeedY: '8000',
pulseCenterX: '0',
pulseCenterY: '0',
pulseDuration: '2500',
pulseStrength: '20',
pulseSpeed: '250',
pulseColor: '#ffffff'
},
'48:13': {
color1: '#ffffff',
color2: '#fb00e8',
background: '#fd04c2',
backgroundFadeSpeed: '250',
waveSpeed: '250',
fadeCenterX: '70',
fadeCenterY: '55',
gradientCenterX: '90',
gradientCenterY: '90',
gradientSize: '1',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '0.75',
fadeSize: '0.25',
overlap: '1',
panSpeedX: '5000',
panSpeedY: '100000',
pulseCenterX: '50',
pulseCenterY: '50',
pulseDuration: '200',
pulseStrength: '20',
pulseSpeed: '500',
pulseColor: '#ffffff'
},
'Sun Spots': {
color1: '#fcd703',
color2: '#5b2c00',
background: '#fef805',
backgroundFadeSpeed: '6000',
waveSpeed: '2000',
fadeCenterX: '70',
fadeCenterY: '55',
gradientCenterX: '90',
gradientCenterY: '20',
gradientSize: '1',
waveCenterX: '20',
waveCenterY: '80',
fadeIntensity: '0.75',
fadeSize: '2',
overlap: '1.05',
panSpeedX: '1500',
panSpeedY: '1500',
pulseCenterX: '0',
pulseCenterY: '0',
pulseDuration: '750',
pulseStrength: '15',
pulseSpeed: '750',
pulseColor: '#242424'
}
}
for (var i in presets) {
var preset = presets[i];
$('.presets').append('' + i + '');
}
$('.presets').on('change', function() {
var settings = presets[$(this).val()];
var name = $(this).val();
var reflector = new Reflector(settings);
for (var i in settings) {
$('.' + i.toUnderscore()).val(settings[i]);
}
$('.pop-this h1').slideUp(500, function() {
$(this).html(name);
$(this).slideDown(500);
});
$('.dump').html('{
' + reflector.getProperties().join(',
') + '
}');
circ.popCircle('trigger', settings);
});
$('input, select').on('keyup change', function() {
var val = $(this).val();
circ.popCircle('update', {
name: $(this).attr('class').toCamel(),
value: val
});
});
});
3213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
