共计 893 个字符，预计需要花费 3 分钟才能阅读完成。
该我的项目成果
外围算法
function movbulb(){
// 扩大 this 的作用域链
with (this) {//ec 管制 xx = (xm - x0) / 8 与 yy = (ym - y0) / 8 执行 20 次
if(ec < 20){
//math.abc 绝对值
//x0 为 0, y0 为 -1000
//xm 为 0，ym 为 9999
if(Math.abs(x0 - xm) < 100 && Math.abs(y0 - ym) < 100){xx = (xm - x0) / 8;
yy = (ym - y0) / 8;
ec++;
}
}
//xx 为初始 0，yy 初始为 0
xx *= 0.99;
yy *= 0.99;
//
x0 = Math.round(x0 + Math.cos(y0 / 15) * p) + xx;
y0+= yy - v;
if(y0 < -h * 2 || x0 < -w * 2 || x0 > nx + w * 2){
y0 = ny + N + h * 2;
x0 = nx/2-100 + Math.random() * 500;
ec = 0;
}
obj.style.top = y0 - h -350;
obj.style.left = x0 - w - 100;
}
}前端代码
<body>
<div class="father_box">
<audio class="music" src="./mp3/ 大鱼.mp3" autoplay="autoplay" controls loop></audio>
<!-- 上面是浮动的桃心 -->
<div class="bigBox">
<div id="bubbles" style="visibility:hidden">
<img src="./images/bluefish.png">
<img src="./images/banfish.png">
<img src="./images/jingfish.png">
</div>
</div>
</div>
</body>该算法代码是实现 fixed 元素由下向上冒泡，img 元素会左右并且一直向上浮动。在前端代码中，把 fixed 元素的父盒子 body, 增加 style 属性，transform:rotate(90deg),img 由左向右~~~~，高低浮动。便造成了鱼的游动。
运行环境
谷歌浏览器，IE 浏览器可能存在背景不兼容问题。
仓库
demo
正文完
