[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] 气球放气效果的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js拖拽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
- 使用JS实现手风琴效果
想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...
- js弹窗登录效果(源码)--web前端
1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS实现弹幕效果
纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的. 首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
随机推荐
- 【Git】四、Git工作
一.Git创建仓库 版本库:代码仓库(repository),可以理解为一个项目的目录,在这个项目的目录中Git对每个文件进行管理,记录每个文件的增删改查记录,并能够追踪历史,在需要的时候可以回退到某 ...
- TFS自动签出解决方案sln或者项目文件csproj的解决办法
问题: 最近公司一个项目组的源代码解决方案打开时总是出现解决方案或者部分项目被自动签出的情况,但签入又提示没有变更.事情虽 小,导致几个程序员要用项目文件时总是要找其他人签入.浪费不少时间.出现时间有 ...
- gradle 构建测试
以后决不能再犯此类低级错误
- CloudStack 全局参数设置
mem.overprovisioning.factor 内存超分参数 cpu.overprovisioning.factor cpu超分参数
- Charles网络工具
Charles 是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析. Charles 通过将自己设置成系统的网络访问代理服务器,使 ...
- DW2.0
一.DW2.0从企业的角度,吸引企业的原因: 1.数据仓库基础设施的成本不再持续增长.在第一代数据仓库中,技术基础设施的成本是不断增长的,随着数据量的增长,基础设施的成本会以指数级增长.但是使用DW2 ...
- handsontable-cell features
数据验证:在columns中设置validator,进行同步或异步验证,还可添加beforeValidate, afterValidate函数,allowInvalid:true可以不用验证 var ...
- MySQL简单实现多字段模糊查询
我所做的商城项目前些时提了新需求,要求前台搜索商品除了能通过商品名称搜索到以外,还可以通过别个信息搜索,比如:商品编号.详情内容描述等等,类似于全文搜索了.我首先想到的就是lucene,但是对代码这样 ...
- Postgresql 用户管理
一, 设置超级用户密码 1 修改 pg_hba.conf 使超级用户postgres 可以登录到数据库中 host all all 127.0.0.1/32 trust 2 修改 postgres ...
- [51单片机] nRF24L01 无线模块 串口法命令 通过无线控制另一个的灯
>_<!概述: 这是在上一个的基础上通过按键发送4种不同命令来控制接收端的LED灯亮的改进版(上一个:http://www.cnblogs.com/zjutlitao/p/3840013. ...