首页 > 代码库 > [JS] 气球放气效果
[JS] 气球放气效果
<!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] 气球放气效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。