Core Code :
Copy code The Code is as follows: var T $ = function (ID) {return document. getelementbyid (ID );}
VaR $ extend = function (DES, Src) {for (var p in SRC) {des [p] = SRC [p]} return des ;}
VaR bubble = function (){
// Random ball style
VaR clss = ['ball _ one', 'ball _ two', 'ball _ Three ', 'ball _ Four', 'ball _ five ', 'ball _ six'];
VaR ball = function (radius, clsname ){
VaR ball = Document. createelement ('div ');
Ball. classname = clsname;
With (ball. Style ){
Width = height = (radius | 10) + 'px '; position = 'absolute ';
}
Return ball;
};
// Screen Saver main class
VaR screen = function (CID, config ){
VaR self = this;
If (! (Self instanceof screen )){
Return new screen (CID, config );
}
Self. Container = T $ (CID );
If (! Self. Container) return;
Config = $ extend (screen. config, config || {});
// Configure attributes
Self. ballsnum = config. ballsnum;
Self. Diameter = 55;
Self. radius = self. diameter/2;
Self. Bounce = config. Bounce;
Self. Spring = config. Spring;
Self. Gravity = config. gravity;
Self. bballs = [];
Self. Timer = NULL;
// Upper, lower, and left borders
Self. t_bound = 0;
Self. B _bound = self. Container. clientheight;
Self. l_bound = 0;
Self. r_bound = self. Container. clientwidth;
};
// Static attributes
Screen. Config = {
Ballsnum: 5, // Number of balls
Spring: 0.8, // elastic Acceleration
Bounce:-0.95, // Rebound
Gravity: 0.1 // gravity
};
Screen. Prototype = {
Initialize: function (){
VaR self = this;
// Generate a ball
Self. createbils ();
// Listen for collision
Self. Timer = setinterval (function (){
Self. hittest ();
}, 32 );
},
Createbils: function (){
VaR self = This, num = self. ballsnum, I = 0;
VaR frag = Document. createdocumentfragment ();
For (; I <num; I ++ ){
VaR ball = new ball (self. diameter, clss [math. Floor (math. Random () * (clss. Length-1)]);
Ball. radius = self. radius;
Ball. Diameter = self. diameter;
Ball. style. Left = (math. Random () * Self. B _bound) + 'px ';
Ball. style. Top = (math. Random () * Self. r_bound) + 'px ';
Ball. VX = math. Random () * 6-3;
Ball. Vy = math. Random () * 6-3;
Frag. appendchild (ball );
Self. bils [I] = ball;
}
Self. Container. appendchild (frag );
},
// Collision Detection
Hittest: function (){
VaR self = This, num = self. ballsnum, bballs = self. bballs;
For (VAR I = 0; I <num-1; I ++ ){
VaR ball0 = bils [I];
Ball0.x = ball0.offsetleft + ball0.radius;
Ball0.y = ball0.offsettop + ball0.radius;
For (var j = I + 1; j <num; j ++ ){
VaR ball1 = bils [J];
Ball1.x = ball1.offsetleft + ball1.radius;
Ball1.y = ball1.offsettop + ball1.radius;
VaR dx = ball1.x-ball0.x;
VaR DY = ball1.y-ball0.y;
VaR Dist = math. SQRT (dx * dx + dy * Dy );
VaR misdist = ball0.radius + ball1.radius;
If (Dist <misdist ){
VaR angle = math. atan2 (dy, dx );
VaR Tx = ball0.x + math. Cos (angle) * misdist;
VaR ty = ball0.y + math. Sin (angle) * misdist;
VaR AX = (TX-ball1.x) * Self. Spring;
VaR ay = (ty-ball1.y) * Self. Spring;
Ball0.vx-= ax;
Ball0.vy-= Ay;
Ball1.vx + = ax;
Ball1.vy + = Ay;
}
}
}
For (VAR I = 0; I <num; I ++ ){
Self. Move (bils [I]);
}
},
// Bubble Motion
Move: function (ball ){
VaR self = this;
Ball. Vy + = self. gravity;
Ball. style. Left = (ball. offsetleft + ball. VX) + 'px ';
Ball. style. Top = (ball. offsettop + ball. Vy) + 'px ';
// Border detection
VaR T = self. t_bound, B = self. B _bound, L = self. l_bound, r = self. r_bound, BC = self. Bounce;
If (ball. offsetleft + ball. diameter> r ){
Ball. style. Left = r-ball. Diameter + 'px ';
Ball. VX * = BC;
} Else if (ball. offsetleft <L ){
Ball. style. Left = L + 'px ';
Ball. VX * = BC;
}
If (ball. offsettop + ball. diameter> B ){
Ball. style. Top = B-ball. Diameter + 'px ';
Ball. Vy * = BC;
} Else if (ball. offsettop <t ){
Ball. style. Top = T + 'px ';
Ball. Vy * = BC;
}
}
};
Return {screen: screen}
}();
Window. onload = function (){
VaR SC = NULL;
T $ ('start'). onclick = function (){
Document. getelementbyid ('inner '). innerhtml = '';
SC = Bubble. Screen ('inner ', {ballsnum: 5, spring: 0.8, bounce:-0.95, gravity: 0.1 });
SC. initialize ();
};
T $ ('stop'). onclick = function () {clearinterval (SC. Timer );}
VaR bound = false
T $ ('change'). onclick = function (){
If (! Bound ){
T $ ('screen'). style. backgroundimage = 'url ("http://demo.jb51.net/js/bubbling/o_bg1.jpg ")';
Bound = true;
} Else {
T $ ('screen'). style. backgroundimage = 'url ("http://demo.jb51.net/js/bubbling/o_bg2.jpg ")';
Bound = false;
}
}
}
[Description]
ProgramThere are major bottlenecks in efficiency. There are still many optimizations to be done. Time to continue improving.
In addition, I would like to thank Luo xiaoyaoqun for their support for images.
[Source code download]
Http://www.jb51.net/jiaoben/28295.html