网站效果：
http://www.fengzhao.icu/love_balloon/html/%E5%91%8A%E7%99%BD.html
效果图:
源码Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>告白气球</title>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
background-color: #000;
}
div{
position: absolute;
border-radius: 50%;
}
#txt{
position: relative;
width: 400px;
height: 100px;
margin: 300px 600px;
font-size: 50px;
z-index: 1000;
}
</style>
</head>
<body>
<div id="txt">
<p>老婆我爱你!</p>
</div>
<audio src="http://www.fengzhao.icu/love_balloon/audio/%E5%91%A8%E6%9D%B0%E4%BC%A6%20-%20%E5%91%8A%E7%99%BD%E6%B0%94%E7%90%83.mp3" autoplay="true" loop="true" hidden="true" id="vd"></audio>
<script type="text/javascript">
//要使用面向对象的思维来开发
//定义一个气球对象
function Balloon(pic){
//盒子
this.div=document.createElement("div");
//初始位置
this.left = randomRange(0,1000);
this.top = randomRange(0,600);
//背景颜色
if(pic == null){
this.bg = randomColor();//0-255
//半径 范围20~80
this.r=Math.random()*60+40;
//运行速度
this.speedX = randomRange(-5,5);
this.speedY = randomRange(-5,5);
}else{
this.bg = pic;
this.r=80;
//运行速度
this.speedX = randomRange(-3,3);
this.speedY = randomRange(-3,3);
}
}
//绘制气球 原型概念
Balloon.prototype.drawBalloon = function(parent){
this.parent = parent;
var style = this.div.style;
this.div.style.width = this.r * 2 + "px";
this.div.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+")";
}
</script>
<script type="text/javascript">
//照片
var n = 1;
var t =setInterval(function(){
var b = new Balloon("url(../img/0"+n+".png)");
//绘制气球
b.drawBalloon(document.body);
//气球动起来
b.run();
n++;
if(n>6){
clearInterval(t);
}
},3000);
//气球
for (var i =0; i<=30;i++){
//创建气球对象
var b = new Balloon();
//绘制气球
b.drawBalloon(document.body);
//气球动起来
b.run();
}
</script>
<script>
function toggleSound() {
var music = document.getElementById("vd");//获取ID
if (music.paused) { //判读是否播放
music.paused=false;
music.play(); //没有就播放
}
}
setInterval("toggleSound()",1);
</script>
</body>
</html>
公众号：
微信
