|
|
P1涉及的技术有HTLM5 多媒体 CSS定位 动画JS面向对象Jquery动画、事件首先来看HTML代码<!DOCTYPE html><html lang="cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c-3.6.0.min.js"></script> </head><<head> < const jsbox = document.createDocumentFragment(); //使用循环生成焰火，这里焰火使用span标签来表示 for (var i = 0; i < qiu.sum; i++) { //获取本次循环生成的x轴坐标 var x = qiu.suiji().x; //获取本次循环生成2、祝福语快速切换与暂停查看 //我们将需要展示的祝福 //我们将需要展示的祝福语，写在数组中，后期遍历这个数组就可以了 const arr = ['虎虎生威', '财源滚滚', '虎年大运', '虎气冲天', '虎越新春', '虎虎虎虎']; //声明一个全局变量，用来当作下标访问数组 let ind = 0; /*声明一个全局变量，用来当作节流阀，防止用户反复点击导致定时器叠加， 祝福语切换太快，还能防止用户反复点击导致BGM重复播放*/ let isok = false; //定义一个全局变量用来存储页面中的定时器 let t; //HTML = arr[ind]; }, 10); } /*调用上面的函数，让页面一打开就开始执行，因为其CSS样式设置了隐藏， 所以这里即使页面一打开，用户也看不见*/ setZf(); /*当 let count; //当点火按钮被点击时，立马让烟花发射BGM开始播放，并将按钮设为禁止点击，防止用户反复点击，造成BUG重叠 fire[0].onclick = function() { $('audio')[1].play(); fire[0].disabled = true; } //当开火按钮被点击，利用这个事件的一点点的延迟效果（刚好是烟花发射BGM播放结束）播放新年BGM fire.click(function() { $('audio')[0].play(); //给烟花盒子添加CSS样式，达到烟花居中显示 box.css({ left: '50%', transform: 'translateX(-50%)', }) /*给烟花盒子添加动画，改变的是top值，当top等于100px时动画结束，因为box的top 初始值位于屏幕的底部，让其top值改为100px，就形成了慢慢向上移动的视觉效果。*/ box.animate({ top: '100px', /*动画结束后，开始执行的函数*/ }, function() { /*当烟花球到达指定位置后，给其添加带有动画（缩放）效果的CSS样式，达到烟花绽放的视觉效果*/ box.addClass('fire'); /*使用定时器判断，烟花是否绽放完成，绽放完成就让烟花球隐藏，让2022虎年logo显示，让祝福语盒子显示*/ count = setInterval(() => { if (Math.abs(box.offset().top) == 100) { box.css({ 'opac以上就是这个项目的所有代码，再次预祝大家新年快乐，虎年大吉，财源滚滚。项目体验链接：
  |
|
发表于 2022-5-8 15:08:03
