关于html:利用冒泡功能算法实现海底之鱼-the-fish-of-ocean

5次阅读

共计 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

正文完