[JS] 氣球放氣效果
阿新 • • 發佈：2017-05-26
增刪改查 兼容ie splay lec ajax json 插件 最小 scale inset
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" > <meta name="description" content="" > <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html{ width: 100%; height: 100%; } body{ width: 100%; height: 100%;/*相對於父級的100% 父級是html*/ position: relative;/*相對定位 父級*/ overflow: hidden; background: #222; } .balloon{ position: absolute;/*絕對定位*/ top: 0; left: 0; height: 160px; width: 160px; margin: 0 auto; background: #faf9f9; box-shadow: -8px -8px 80px -8px rgba(234,80,122,0.6) inset;/*橫向 縱向 羽化 大小 顏色*/ border-radius:160px 160px 64px 160px;/*圓角屬性 左上 右上 右下 左下 （順時針）*/ transform: rotate(45deg); -webkit-transform: rotate(45deg); } .balloon::after{/*偽元素 不存在的 css創建出來的元素**/ position: absolute; bottom: 0; right: 0; content: ‘‘;/*開啟偽元素*/ display: block; width: 0; height: 0; border: 8px solid transparent;/*四邊透明*/ border-right-color: rgba(234,98,122,.8);/*設置右邊邊框*/ transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> </head> <body> </body> </html> <script type="text/javascript"> //js 基於原型的動態解釋性 腳本語言 /** * 1 .響應用戶操作 點擊鼠標 * 2 .操作頁面DOM節點 增刪改查 css樣式 * 3 .數據交互 ajax json 正則表達式 * 4 .封裝插件 框架 mvc mvvm augular vue node.js */ /** * 1 .利用js動態生成div 並且初始化氣球的坐標 * 1.生成幾個 * 2.怎麽生成 * 2 .氣球動起來 * 1 .改變氣球top * 2 .在一定時間內一直減少top值 * * * 3 .點擊氣球，爆炸 * 1. 點擊-放氣動畫 * 2. 刪除 * 知識點： querySelector querySelectorAll （h5 api 兼容ie8） * call 函數執行的時候 改變函數內部this指向為當前環境下的this * bind 硬綁定當前延時觸發函數的內部this指向為當前環境下的this * * 【進階】 叠代 遞歸 函數 詞法作用域 * */ var num = 10;/*氣球數量*/ var wW = window.innerWidth;//瀏覽器寬度 var wH = window.innerHeight; var bW = 160;//氣球寬度 var timer = null;//初始化定時器 init(); timer = setInterval(move,30); function init(){ for(var i = 0;i<10;i++){ var randomX = Math.floor(Math.random()*wW)-bW; randomX = Math.max(0,randomX);//限制left最小為0 var oBalloon = document.createElement(‘div‘); oBalloon.className = ‘balloon‘;//添加類名 oBalloon.style.left = randomX+‘px‘; oBalloon.style.top = wH - bW + ‘px‘; oBalloon.speed = Math.random()*4+1;//自定義屬性 document.body.appendChild(oBalloon);//添加到body oBalloon.onclick = function(){ boom.call(this,function(){ clearInterval(this.timer);//移除定時器 this.parentNode.removeChild(this); });//call 轉移this指向 //this.parentNode.removeChild(this); } } } /* * 氣球運動 */ function move(){ var oBalloons = document.querySelectorAll(‘.balloon‘); for(var i=0,len=oBalloons.length;i<len;i++){ oBalloons[i].style.top = oBalloons[i].offsetTop - oBalloons[i].speed+‘px‘; } } function boom(callback){//氣球放氣動畫 var This = this; this.timer = setInterval(function(){//setInterval裏面的this指向widown 相當於window.setInterval if(this.offsetWidth<10){ console.log(‘delete‘) callback&&callback.call(this); } this.speed = this.speed + 1;//速度遞加 this.style.width = this.offsetWidth-10+‘px‘;//縮小 this.style.height = this.offsetHeight-10+‘px‘; this.style.top = this.offsetTop-this.speed+‘px‘;//加速向上 }.bind(this),30); } </script>
[JS] 氣球放氣效果