javascript如何實(shí)現(xiàn)小球跳動(dòng)效果

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 20:00:52

javascript如何實(shí)現(xiàn)小球跳動(dòng)效果

javascript如何實(shí)現(xiàn)小球跳動(dòng)效果:這次給大家?guī)韏avascript如何實(shí)現(xiàn)小球跳動(dòng)效果，javascript實(shí)現(xiàn)小球跳動(dòng)效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。今天介紹的是一種通過javascript實(shí)現(xiàn)的一種炫酷的動(dòng)畫效果，具體實(shí)現(xiàn)特效我通過圖片展示給大家還有釋放后這些小球會(huì)在一個(gè)指定

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀javascript如何實(shí)現(xiàn)小球跳動(dòng)效果:這次給大家?guī)韏avascript如何實(shí)現(xiàn)小球跳動(dòng)效果，javascript實(shí)現(xiàn)小球跳動(dòng)效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。今天介紹的是一種通過javascript實(shí)現(xiàn)的一種炫酷的動(dòng)畫效果，具體實(shí)現(xiàn)特效我通過圖片展示給大家還有釋放后這些小球會(huì)在一個(gè)指定

這次給大家?guī)韏avascript如何實(shí)現(xiàn)小球跳動(dòng)效果，javascript實(shí)現(xiàn)小球跳動(dòng)效果的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

今天介紹的是一種通過javascript實(shí)現(xiàn)的一種炫酷的動(dòng)畫效果，具體實(shí)現(xiàn)特效我通過圖片展示給大家

彈球釋放時(shí)候的效果

還有釋放后這些小球會(huì)在一個(gè)指定范圍內(nèi)進(jìn)行運(yùn)動(dòng)，最關(guān)鍵的部分就是這些小球的各種樣式都是隨機(jī)獲取的，所以這樣才出現(xiàn)了一個(gè)炫酷的效果，主要使用到的隨機(jī)數(shù)生成的代碼如下：

//獲取一個(gè)范圍內(nèi)的隨機(jī)數(shù)random返回一個(gè)大于0小于1的一個(gè)隨機(jī)數(shù) 
 function selectFrom(Lowervalue,upperValue){ 
 var choices=upperValue-Lowervalue+1; 
 return Math.floor(Math.random()*choices+Lowervalue); 
 }

之后這些小球的各種樣式通過隨機(jī)函數(shù)獲得，剩下的一部分是就是有關(guān)定位方面的，每一個(gè)小球都是一個(gè)p，其都是絕對(duì)定位，通過offsetLeft來獲取這些小球的相對(duì)于父容器的位置，防止其跑出邊界，只要實(shí)現(xiàn)方式是，通過offsetLeft獲得這個(gè)p的相對(duì)位置后，在判斷當(dāng)期移動(dòng)到邊界的時(shí)候，讓這個(gè)p的速度等于速度的相反數(shù)，

 //設(shè)置運(yùn)行速度
 Circle.prototype.run=function(){
 var maxLeft=1435-this.r*2; var maxTop=700-this.r*2; var that=this; //使用間隔式計(jì)時(shí)器
 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)
 }

之后就看到這些彈球在一個(gè)范圍內(nèi)運(yùn)動(dòng)的效果了：

這里寫圖片描述

整個(gè)效果的完整代碼如下：

<!DOCTYPE html><html>
 <head>
 <meta charset="UTF-8">
 <title>躁動(dòng)的小球</title>
 <style type="text/css">
 *{ margin: 0; padding: 0; }
 p{ border-radius: 50%; position: absolute; }
 body{ width: 100%; height: 100%; background-image: url(img/1369966956468.jpg) ; background-repeat: no-repeat; }
 </style>
 <script type="text/javascript">
 //獲取一個(gè)范圍內(nèi)的隨機(jī)數(shù)random返回一個(gè)大于0小于1的一個(gè)隨機(jī)數(shù)
 function selectFrom(Lowervalue,upperValue){
 var choices=upperValue-Lowervalue+1; return Math.floor(Math.random()*choices+Lowervalue);
 } function Circle(){
 this.p=document.createElement("p"); this.r=selectFrom(10,40); this.left=selectFrom(0,100); this.top=selectFrom(0,50); this.bg='rgba('+selectFrom(0,255)+','+selectFrom(0,255)+','+selectFrom(0,255)+','+Math.random()+')'; this.speedX=selectFrom(-10,10); this.speedY=selectFrom(-8,8); 
 } //繪制小球
 Circle.prototype.drawCirle=function(parent){
 //將parent設(shè)置成該p的一個(gè)屬性
 this.parent=parent; var style=this.p.style;
 style.width=this.r*2+"px";
 style.height=this.r*2+"px";
 style.left=this.left+"px";
 style.top=this.top+"px";
 style.backgroundColor=this.bg;
 parent.appendChild(this.p); 
 } //設(shè)置運(yùn)行速度
 Circle.prototype.run=function(){
 var maxLeft=1435-this.r*2; var maxTop=700-this.r*2; var that=this; //使用間隔式計(jì)時(shí)器
 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)
 } 
 </script>
 </head>
 <body>
 <p id=""></p>
 <script type="text/javascript">
 for(var i=0;i<100;i++)
 { //這些函數(shù)里面涉及原型，通過 Circle()函數(shù)可以找到指向draw,run函數(shù)。
 var c = new Circle();
 c.drawCirle(document.body);
 c.run();
 } </script>
 </body></html>

這里面還涉及到this的使用，在函數(shù)內(nèi)部再使用另一個(gè)函數(shù)時(shí)，一定要判斷當(dāng)前函數(shù)的作用域，分清this指向的作用于域，在內(nèi)部調(diào)用時(shí)，在外部可以使用變量來保存當(dāng)前this指向的作用域，希望這些對(duì)你的學(xué)習(xí)能有所幫助。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

javascript如何實(shí)現(xiàn)小球跳動(dòng)效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：實(shí)現(xiàn) js 彈跳

熱門焦點(diǎn)

javascript如何實(shí)現(xiàn)小球跳動(dòng)效果

javascript如何實(shí)現(xiàn)小球跳動(dòng)效果

javascript如何實(shí)現(xiàn)小球跳動(dòng)效果

最新推薦

猜你喜歡

熱門推薦