如何使用
jquery为图像重新创建此类型的移动：
http://www.istockphoto.com/stock-video-12805249-moving-particles-loop-soft-green-hd-1080.php
我打算将它用作网页背景.如果jquery不可能,我将使用flash as3.但我更喜欢jquery.
解决方法
编辑：
Raphael肯定更适合这个,因为它支持IE. jQuery的问题在于,由于CSS的限制,圆角在IE中很难做到……在Raphael交叉浏览器圈子里没有汗水.
jsFiddle with Raphael – all browsers：
(虽然它可能看起来更好speeded up in IE)
(function() {
var paper,circs,i,nowX,nowY,timer,props = {},toggler = 0,elie,dx,dy,rad,cur,opa;
// Returns a random integer between min and max
// Using Math.round() will give you a non-uniform distribution!
function ran(min,max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function moveIt()
{
for(i = 0; i < circs.length; ++i)
{
// Reset when time is at zero
if (! circs[i].time)
{
circs[i].time = ran(30,100);
circs[i].deg = ran(-179,180);
circs[i].vel = ran(1,5);
circs[i].curve = ran(0,1);
circs[i].fade = ran(0,1);
circs[i].grow = ran(-2,2);
}
// Get position
nowX = circs[i].attr("cx");
nowY = circs[i].attr("cy");
// Calc movement
dx = circs[i].vel * Math.cos(circs[i].deg * Math.PI/180);
dy = circs[i].vel * Math.sin(circs[i].deg * Math.PI/180);
// Calc new position
nowX += dx;
nowY += dy;
// Calc wrap around
if (nowX < 0) nowX = 490 + nowX;
else nowX = nowX % 490;
if (nowY < 0) nowY = 490 + nowY;
else nowY = nowY % 490;
// Render moved particle
circs[i].attr({cx: nowX,cy: nowY});
// Calc growth
rad = circs[i].attr("r");
if (circs[i].grow > 0) circs[i].attr("r",Math.min(30,rad + .1));
else circs[i].attr("r",Math.max(10,rad - .1));
// Calc curve
if (circs[i].curve > 0) circs[i].deg = circs[i].deg + 2;
else circs[i].deg = circs[i].deg - 2;
// Calc opacity
opa = circs[i].attr("fill-opacity");
if (circs[i].fade > 0) {
circs[i].attr("fill-opacity",Math.max(.3,opa - .01));
circs[i].attr("stroke-opacity",opa - .01)); }
else {
circs[i].attr("fill-opacity",Math.min(1,opa + .01));
circs[i].attr("stroke-opacity",opa + .01)); }
// Progress timer for particle
circs[i].time = circs[i].time - 1;
// Calc damping
if (circs[i].vel < 1) circs[i].time = 0;
else circs[i].vel = circs[i].vel - .05;
}
timer = setTimeout(moveIt,60);
}
window.onload = function () {
paper = Raphael("canvas",500,500);
circs = paper.set();
for (i = 0; i < 30; ++i)
{
opa = ran(3,10)/10;
circs.push(paper.circle(ran(0,500),ran(0,ran(10,30)).attr({"fill-opacity": opa,"stroke-opacity": opa}));
}
circs.attr({fill: "#00DDAA",stroke: "#00DDAA"});
moveIt();
elie = document.getElementById("toggle");
elie.onclick = function() {
(toggler++ % 2) ? (function(){
moveIt();
elie.value = " Stop ";
}()) : (function(){
clearTimeout(timer);
elie.value = " Start ";
}());
}
};
}());
第一次尝试jQuery解决方案如下：
这个jQuery尝试在IE中几乎失败,在FF中很慢. Chrome和Safari做得很好：
jsFiddle example for all browsers (IE is not that good)
(我没有在IE中实现淡入淡出,而且IE没有圆角…而且JS也比较慢,所以整体看起来很糟糕)
jsFiddle example for Chrome and Safari only (4x more particles)
(function() {
var x,y,$elie,pos,$that,vel,deg,fade,curve,ko,mo,oo,grow,len;
// Returns a random integer between min and max
// Using Math.round() will give you a non-uniform distribution!
function ran(min,max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function moveIt()
{
$("div.spec").each(function(i,v) {
$elie = $(v);
if (! $elie.data("time"))
{
$elie.data("time",ran(30,100));
$elie.data("deg",ran(-179,180));
$elie.data("vel",ran(3,10));
$elie.data("curve",1));
$elie.data("fade",1));
$elie.data("grow",ran(-2,2));
}
vel = $elie.data("vel");
deg = $elie.data("deg");
fade = $elie.data("fade");
curve = $elie.data("curve");
grow = $elie.data("grow");
len = $elie.width();
if (grow > 0)
len = Math.min(len + grow,50);
else
len = Math.max(len + grow,20);
$elie.css("-moz-border-radius",len/2);
$elie.css("border-radius",len/2);
$elie.css("width",len);
$elie.css("height",len);
pos = $elie.position();
$elie.data("time",$elie.data("time") - 1);
if (curve)
$elie.data("deg",(deg + 5) % 180);
else
$elie.data("deg",(deg - 5) % 180);
ko = $elie.css("-khtml-opacity");
mo = $elie.css("-moz-opacity");
oo = $elie.css("opacity");
if (fade)
{
$elie.css("-khtml-opacity",Math.max(ko - .1,.5));
$elie.css("-moz-opacity",Math.max(mo - .1,.5));
$elie.css("opacity",Math.max(oo - .1,.5));
} else
{
$elie.css("-khtml-opacity",Math.min(ko - -.1,1));
$elie.css("-moz-opacity",Math.min(mo - -.1,1));
$elie.css("opacity",Math.min(oo - -.1,1));
}
if (vel < 3)
$elie.data("time",0);
else
$elie.data("vel",vel - .2);
nowX = pos.left;
nowY = pos.top;
x = vel * Math.cos(deg * Math.PI/180);
y = vel * Math.sin(deg * Math.PI/180);
nowX = nowX + x;
nowY = nowY + y;
if (nowX < 0)
nowX = 490 + nowX;
else
nowX = nowX % 490;
if (nowY < 0)
nowY = 490 + nowY;
else
nowY = nowY % 490;
$elie.css("left",nowX);
$elie.css("top",nowY);
});
}
$(function() {
$(document.createElement('div')).appendTo('body').attr('id','Box');
$elie = $("<div/>").attr("class","spec");
// Note that math random is inclussive for 0 and exclussive for Max
for (i = 0; i < 100; ++i)
{
$that = $elie.clone();
$that.css("top",495));
$that.css("left",495));
$("#Box").append($that);
}
timer = setInterval(moveIt,60);
$("input").toggle(function() {
clearInterval(timer);
this.value = " Start ";
},function() {
timer = setInterval(moveIt,60);
this.value = " Stop ";
});
});
}());
