转载:https://blog.csdn.net/weixin_41110459/article/details/80556720
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>告白气球</title>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
background: black;
}
div{
position: absolute;
border-radius: 50%;
}
#txt{
position: relative;
font-family: 楷体;
font-size: 50px;
width: 400px;
height: 100px;
margin: 260px 520px;
z-index: 1000;
}
</style>
</head>
<body>
<!--
作者:offline
时间:2018-07-06
描述:div></div>
-->
<div id="txt"><p>老婆,我爱你!</p></div>
<embed src="music/周笔畅-最美的期待.mp3" autoplay="autoplay"></embed>
<script type="text/javascript" src="js/Balloon.js"></script>
<script type="text/javascript">
var n=0;
//创建一个对象
var t=setInterval(function(){
var b = new Balloon("url(img/"+n+".png)");
b.drawBalloon(document.body);
b.run();
n++;
if(n>8){
clearInterval(t);
}
},3000);
for(var i=0;i<30;i++){
//创建一个对象
var b = new Balloon();
b.drawBalloon(document.body);
b.run();
}
</script>
</body>
</html>
<head>
<meta charset="utf-8" />
<title>告白气球</title>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
background: black;
}
div{
position: absolute;
border-radius: 50%;
}
#txt{
position: relative;
font-family: 楷体;
font-size: 50px;
width: 400px;
height: 100px;
margin: 260px 520px;
z-index: 1000;
}
</style>
</head>
<body>
<!--
作者:offline
时间:2018-07-06
描述:div></div>
-->
<div id="txt"><p>老婆,我爱你!</p></div>
<embed src="music/周笔畅-最美的期待.mp3" autoplay="autoplay"></embed>
<script type="text/javascript" src="js/Balloon.js"></script>
<script type="text/javascript">
var n=0;
//创建一个对象
var t=setInterval(function(){
var b = new Balloon("url(img/"+n+".png)");
b.drawBalloon(document.body);
b.run();
n++;
if(n>8){
clearInterval(t);
}
},3000);
for(var i=0;i<30;i++){
//创建一个对象
var b = new Balloon();
b.drawBalloon(document.body);
b.run();
}
</script>
</body>
</html>
js:
Balloon.js
//要使用面向对象的思维来开发
//定义一个气球对象
/*
* 分析属性方法
* 半径 r
* 位置 left top
* 盒子 div
* 背景 bg
* 速度 speedX speedY
*/
//把气球画出来
//drawBalloon()
//让气球动起来
//run()
function Balloon(pic) {
//盒子
this.div = document.createElement("div");
//位置
this.left = randomRange(0,1000);
this.top = randomRange(0,600);
//速度
this.speedX = randomRange(-3,3);
this.speedY = randomRange(-3,3);
//背景
if(pic == null){
this.bg = randomColor();
this.r = randomRange(20,80);
}else{
this.bg = pic;
this.r = 100;
}
}
//画气球 原型
Balloon.prototype.drawBalloon = function(parent) {
this.parent = parent;
var style = this.div.style;
style.width = this.r * 2 +"px";
style.height = this.r * 2 +"px";
style.left = this.left + "px";
style.top = this.top + "px";
style.background = this.bg;
parent.appendChild(this.div);
}
//开始移动
Balloon.prototype.run =function(){
//获取父容器最大宽,高
var maxLeft = this.parent.offsetWidth - this.r * 2;
var maxTop = this.parent.offsetHeight - this.r * 2;
var ts = this;
//设置定时器
setInterval(function(){
//左边移动距离
var left = ts.div.offsetLeft + ts.speedX;
//顶部移动的距离
var top = ts.div.offsetTop + ts.speedY;
//处理边界问题
if(left<=0){
left = 0;//这里一定要赋值,不然部分气球会贴边滚动,不反弹
ts.speedX *=-1;
}
if(top<=0){
top = 0;//这里一定要赋值,不然部分气球会贴边滚动,不反弹
ts.speedY *=-1;
}
if(left>=maxLeft){
left=maxLeft;
ts.speedX *= -1;
}
if(top>=maxTop){
top=maxTop;
ts.speedY *= -1;
}
//开始移动
ts.div.style.left = left + "px";
ts.div.style.top = top + "px";
},20);
}
//封装一个指定范围的随机函数
function randomRange(min , max ) {
return Math.random()*(max - min)+min ;
}
//封装一个随机的颜色
function randomColor(){
var r = randomRange(0,255);
var g = randomRange(0,255);
var b = randomRange(0,255);
var a = randomRange(0,1);
return "rgba("+r+","+g+","+b+","+a+")";
}