這次帶給大家javascript如何實現小球跳動效果，javascript實現小球跳動效果的注意事項有哪些，下面就是實戰案例，一起來看一下。
今天介紹的是一種透過javascript實現的一種酷炫的動畫效果，具體實現特效我透過圖片展示給大家
還有這些小球在釋放後會在一個指定範圍內進行運動，最關鍵的部分就是這些小球的各種樣式都是隨機取得的，所以這樣才出現了一個酷炫的效果，主要使用到的隨機數產生的程式碼如下：
//获取一个范围内的随机数random返回一个大于0小于1的一个随机数
function selectFrom(Lowervalue,upperValue){
var choices=upperValue-Lowervalue+1;
return Math.floor(Math.random()*choices+Lowervalue);
}之後這些小球的各種樣式透過隨機函數獲得，剩下的一部分是就是有關定位方面的，每一個小球都是一個p，其都是絕對定位，透過offsetLeft來取得這些小球的相對於父容器的位置，防止其跑出邊界，只要實現方式是，透過offsetLeft獲得這個p的相對位置後，在判斷當期移動到邊界的時候，讓這個p的速度等於速度的相反數，
//设置运行速度
Circle.prototype.run=function(){
var maxLeft=1435-this.r*2; var maxTop=700-this.r*2; var that=this; //使用间隔式计时器
setInterval(function(){
var left=that.p.offsetLeft + that.speedX; var top=that.p.offsetTop + that.speedY; if(left<=0)
{
left=0;
that.speedX *=-1;
} if(top<=0)
{
top=0;
that.speedY *=-1;
} if(left>=maxLeft)
{
left=maxLeft;
that.speedX*=-1;
} if(top>=maxTop)
{
top=maxTop;
that.speedY*=-1;
}
that.p.style.left=left+"px";
that.p.style.top=top+"px";
},30)
}之後就看到這些彈珠在一個範圍內運動的效果了：
整個效果的完整程式碼如下：
躁动的小球
這裡面還涉及this的使用，在函數內部再使用另一個函數時，一定要判斷當前函數的作用域，分清this指向的作用於域，在內部呼叫時，在外部可以使用變數來保存當前this指向的作用域，希望這些對你的學習能有所幫助。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是javascript如何實現小球跳動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
