? ? ? ? ?廢話不多說，直接開工，用大腦和代碼說話。
? ? ? 躁動的小球效果展示 ? ? ? ? ?其實是個動態的頁面，我也不知道怎么截取動態圖片，不好意思，各位。
? ? ? ? ? ? ? ? ?思路分析加代碼
為了讓各位讀者更加清晰的明白整個制作過程，我采用邊分析邊寫代碼的形式來給大家呈現。
1、搭建模塊：
其實我們的模塊只有兩個，一個背景，一個是小球。
<body>
? ? ? ? ? ? ? <div ?id="wrap"> ? </div> ?
</body>
//這個div是什么呢？就是我們需要放置小球的區域,也是我們的背景區域。我給他一個起了名字叫做wrap
2、給我們搭建的模塊添加應有的屬性
<style>
//全局模式，去掉所有的內邊距和外邊距
*{
padding: 0 ; ?
margin: 0 ;
}
// 給html和body的高度設定100%是為了可以使我們的效果不會因為窗口的大小而受到影響
也是為了我們創建的div好賦值。
html,bady{
height:100%;
}
//給創建的div添加屬性。
#wrap{height:100%;
background-color:black;
position:relative;
overflow:hidden;
}
// ?給小球添加屬性
.boll{
border-radius:50%;
position:absolute;
}
</style>
好了，準備工作已經做好了，下面我們要開始JS的代碼操作了。
3、js實現動態的效果
<script ?type="text/javascript">
//思路分析、我們要創建的小球需要他有什么效果呢？
1、隨機產生在任意的地方
2、隨機的大小 ?
3、隨機的顏色
4、隨機的運動速度
5、隨機的運動方向
//OK，以上可以看出，它具備五個隨機的屬性，那么我就定義一個隨機函數放在那，以后隨時用到隨時調用，已達到結構的最優化。
// 定義一個隨機數,產生（min,max）范圍內的隨機數
function ?randFn (min,max){
return ?parseInt(Math.random()*(max-min)+min)
}
// ?下面我們需要創建構造函數，由構造函數獲取小球對象
function ?Boll (){
// 小球的尺寸(大小)
var wh = ranFn(20,50);
this.width = wh;
this.height = wh;
// ?小球的初始坐標，即從哪個地方出現小球
this.left = randFn(0,document.body.offsetWidth-wh);
this.top = randFn(0,document.body.offsetHeight-wh);
//有人可能對上面的“document.body.offsetWidth-wh”代碼不是很明白 。document.bady.offsetWidth是什么意思呢？就是拿頁面可視距離（邊框的距離）減去小球的距離就是允許小球出現的距離。附圖一張，上下距離一樣的理解方式。
// 我們繼續構造小球對象 ?下面是隨機顏色。注意，獲取隨機顏色一定要用rgbaXXXX的樣式來獲取。還要注意拼接不有漏了加號或引號和逗號。
this.color = 'rgba('+randFn(0,256)+','+randFn(0,256)+','+randFn(0,256)+','+Math.random()+')';
//小球的運動隨機速度
this.speedX = randFn(-10,10) ? //橫向移動 ?加載時可以隨機的向左或向右移動
this.speedY = randFn(-10,10) ?//縱向移動 ? 加載時可以隨機的向上或向下移動
// ?開辟屬性，保存創建出來的DOM節點
this.div = document.createElement('div');
}
// 添加繪制小球的方法
Boll.prototype.draw = function(){
this.div.className = 'boll';
this.div.style.width = this.width+'px';
this.div.style.height = this.height+'px';
this.div.style.left = this.left+'px';
this.div.style.top = this.top+'px';
this.div.style.backgroundColor = this.color;
//下面把創建好的標簽拼接到文檔流里去
var wrap = document.querySelector('#wrap');
wrap.appendChild(this.div);
}
// 設置定時器，設置判斷條件，讓小球在條件內運動
Boll.prototype.run = function(){
var self = this;
setInterval(function(){
//架設if判斷邊界情況
if(self.div.offsetLeft+self.div.offsetWidth>=document.body.offsetWidth || self.div.offsetLeft<0){
self.speedX *=-1;
}
if(self.div.offsetTop+self.div.offsetHeight>=document.body.offsetHeight||self.div.offsetTop<0){
self.speedY *=-1;
}
self.div.style.left = self.div.offsetLeft+self.speedX+'px'
self.div.style.top = self.div.offsetTop+self.speedY+'px'
},10)
}
// ?好了 調用起來 ?試試吧
window.onload = function(){
for(var i= 0;i<100;i++{
var boll = new Boll()
boll.draw()
boll.run()
}
}
</script>
辛苦各位客官，謝謝。
