气球表白网页

最新推荐文章于 2024-01-08 11:07:56 发布

转载最新推荐文章于 2024-01-08 11:07:56 发布 · 441 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/weixin_41110459/article/details/80556720

标签

#web

web 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的浪漫告白网页，页面中包含动态气球效果和背景音乐。通过面向对象的方法创建气球对象，并实现气球的随机运动。

转载：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+")";
}