jQuery实现的分子运动小球碰撞效果

本文实例讲述了jQuery实现的分子运动小球碰撞效果。分享给大家供大家参考，具体如下：
先看效果图吧，因为小球是运动状态的，不好截图，这里就先大体画了一下路线，表示大体意思吧，如果想看真实的效果，自己粘贴下去运行：

小球有点小哟，嘿嘿，没有对细节进行详细的处理，如果像让它完美一点，自己处理下吧！这里是模拟的理想状态下的，没有摩擦力与组里的分子碰撞运动，高科技哟~~~~~~mu~a
代码也没有整理，如果有心的话，把它整理成面向对象形式的吧！
代码如下：

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script><script type="text/javascript" >var dim_half_past_PI = dimAngle（Math.PI / 2）; // Math.PI/2的约数var lastAngle = dimAngle（Math.PI/8）; // 发射角度（0-dimAngle（Math.PI））var v = 120; //飞行速度【>0】var lastPosition = {}; // 最后一次碰撞坐标var lastTime = ""; // 最后一次碰撞时间var lastDirection = "top"; // 开始发射方向（top,bottom,left,right）var horizen = 1; // 水品方向的积数var vertical = 1; // 竖直方向的积数var box = {};function dimAngle（angle） {var tempAngle = angle + "";return parseFloat（tempAngle.substring（0, 6））;}function getWillDirection（position, box） {var direction = lastDirection;if （position.x < box.left） {direction = "right";}if （position.x > box.right） { direction = "left"}if （position.y < box.top） {direction = "bottom";}if （position.y > box.bottom） {direction = "top";}return direction;}function getScale（direction, angle） { switch（direction）{case "top":vertical = -1;if （angle < dim_half_past_PI） {horizen = 1;}if （angle > dim_half_past_PI） {horizen = -1;}if （angle == dim_half_past_PI） {horizen = 0;}break;case "left":horizen = -1;if （angle > dim_half_past_PI） {vertical = 1;}if （angle < dim_half_past_PI） {vertical = -1;}if （angle == dim_half_past_PI） {vertical = 0;}break;case "bottom":vertical = 1;if（angle > dim_half_past_PI） {horizen = 1;}if（angle < dim_half_past_PI） {horizen = -1;}if（angle == dim_half_past_PI） {horizen = 0;}break;case "right":horizen = 1;if （angle > dim_half_past_PI） {vertical = -1;}if （angle < dim_half_past_PI） {vertical = 1;}if （angle == dim_half_past_PI） {vertical = 0;}break;}}function getOutAngle（inAngle） {if （inAngle == dim_half_past_PI || inAngle == 0） {return inAngle;} else {return dim_half_past_PI - inAngle;}}function setPosition（obj, position） {obj.css（{ "left": position.x +"px", "top": position.y +"px"}）;}function run（obj） {var vx = Math.cos（lastAngle） * v;var vy = Math.sin（lastAngle） * v;var runTime = （new Date（）.getTime（） - lastTime） / 1000;getScale（lastDirection, lastAngle）;var sx = vx * runTime * horizen;var sy = vy * runTime * vertical;var position = {x: lastPosition.x + sx,y: lastPosition.y + sy};setPosition（obj, position）;var currentDirection = getWillDirection（position, box）;console.log（currentDirection +":"+lastDirection+":"+vertical+":"+horizen+":"+lastAngle+":"+dim_half_past_PI）;// 如果没有发生碰撞if （currentDirection ！= lastDirection） {// 如果发生了碰撞lastDirection = currentDirection;lastPosition = position;lastTime = new Date（）.getTime（）;lastAngle = getOutAngle（lastAngle）;}setTimeout（function （） {run（obj）;}, 30）;}$（document）.ready（function （） {var boxer = $（"#box"）;var x = parseInt（boxer.offset（）.left）;var y = parseInt（boxer.offset（）.top）;box = {left: x,top: y,right: x + boxer.width（）,bottom: y + boxer.height（）};var runner = $（"#runner"）;lastTime = new Date（）.getTime（）;lastPosition = {x: x,y: y + boxer.height（）};run（runner）;}）;</script><style type="text/css" >body { margin:0; padding:0; }#box { margin:0 auto; width:500px; height:500px; border:3px solid #DDDDDD; border-radius:4px; -wekit-border-radius:4px; -moz-border-radius:4px;}#runner { width:10px; height:10px; font-size:10px; color:black; padding:0; position:absolute; left:100px; top:480px;}</style></head><body><div id="box"><div id="runner">●</div></div></body></html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》
希望本文所述对大家jQuery程序设计有所帮助。