javascript实现弹球效果
今天介绍的是一种通过javascript实现的一种炫酷的动画效果,具体实现特效我通过图片展示给大家
还有释放后这些小球会在一个指定范围内进行运动,最关键的部分就是这些小球的各种样式都是随机获取的,所以这样才出现了一个炫酷的效果,主要使用到的随机数生成的代码如下:
//获取一个范围内的随机数random返回一个大于0小于1的一个随机数
function selectFrom(Lowervalue,upperValue){
var choices=upperValue-Lowervalue+1;
return Math.floor(Math.random()*choices+Lowervalue);
}
之后这些小球的各种样式通过随机函数获得,剩下的一部分是就是有关定位方面的,每一个小球都是一个div,其都是绝对定位,通过offsetLeft来获取这些小球的相对于父容器的位置,防止其跑出边界,只要实现方式是,通过offsetLeft获得这个div的相对位置后,在判断当期移动到边界的时候,让这个div的速度等于速度的相反数,
//设置运行速度
Circle.prototype.run=function(){
var maxLeft=1435-this.r*2;
var maxTop=700-this.r*2;
var that=this;
//使用间隔式计时器
setInterval(function(){
var left=that.div.offsetLeft + that.speedX;
var top=that.div.offsetTop + that.speedY;
if(left<=0)
{
left=0;
that.speedX *=-1;
}
if(top<=0)
{
top=0;
that.speedY *=-1;
}
if(left>=maxLeft)
{
l