告白气球，这个情人节你值得拥有！

网站效果：

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~80this.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>

公众号：

微信

告白气球，这个情人节你值得拥有！相关推荐

H5浪漫告白气球表白
引言:作为一名优秀的程序猿,在生活中总要给自己心爱的人一些小惊喜,今天小编来教一下大家如何用HTML5来制作一个浪漫的告白气球表白页面具体功能有 1.气球的随机移动 2.照片的随机产生 3.浪漫的唯 ...
计算机音乐谱告白气球乐谱,天谕手游告白气球乐谱代码是什么-天谕手游告白气球乐谱代码分享_快吧手游...
天谕手游告白气球乐谱代码是什么?天谕中我们可以使用外部代码复制到游戏中,然后制作出自己的音乐乐谱.很多小伙伴都想把这一首歌写进自己的天谕乐谱.下面就一起来看看吧! 天谕手游告白气球乐谱代码分享 A t ...
android气球上升的属性动画,html5 canvas告白气球上升背景动画特效
特效描述:html5 canvas 告白气球上升背景动画特效.html5基于canvas绘制各种卡通气球上升动画.告白气球背景动画特效. 代码结构 1. 引入JS 2. HTML代码 Balloon ...
七夕活动_一个移动鼠标播放告白气球的Python程序（2022年8月可用）
前言七夕活动,把一个代码抛出来抛下效果当鼠标移动到屏幕左侧,自动播放音乐`告白气球.mp3`,可以自行调整记录走过创意代码表白思路 1.划选一下你的区域A, 2.实时获取鼠标坐标 3.加 ...
钢琴学习:B站:时一:《周杰伦的《告白气球》真是百听不厌，5分钟教会你弹唱，一学便会》
目录一.目的 1.1 想知道学习:<周杰伦的<告白气球>真是百听不厌,5分钟教会你弹唱,一学便会> 1.2 把精华部分总结出来,不必每次看视频学习,直接从此笔记中看图文快速回 ...
情人节程序员用HTML网页表白【告白气球，飞入我的心扉】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
告白气球--吉他教学
url:http://v.youku.com/v_show/id_XMjkyNzg5MzAyMA==.html?spm=a2h0k.8191407.0.0&from=s1.8-1-1.2 前奏 ...
从你的全世界路过- 告白气球
我希望有个人如你一般的人,如山间清爽的风,如古城温暖的光,从清晨 , 到傍晚, 从山野 , 到书房 ,一切都没有关系只要最后是你就好接口 1.定义:接口(interface)是抽 ...
【告白气球——HTML实现】
效果背景.歌词等可以根据自己的需要加以修改,也可以设置添加背景音乐~ 代码 <!doctype html> <html> <head> <meta

告白气球，这个情人节你值得拥有！

网站效果：

http://www.fengzhao.icu/love_balloon/html/%E5%91%8A%E7%99%BD.html

告白气球，这个情人节你值得拥有！相关推荐

最新文章

热门文章