利用冒泡功能算法实现海底之鱼 the fish of ocean

该项目效果

核心算法

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;
}
}

前端代码

该算法代码是实现 fixed元素由下向上冒泡，img元素会左右并且不断向上浮动。在前端代码中，把fixed元素的父盒子body,添加style属性，transform:rotate(90deg),img元素也随着顺时针旋转90度,原本由下向上，左右浮动img元素变成了由左向右，上下浮动。便形成了鱼的游动。

rotate

rotate前

运行环境

谷歌浏览器，IE浏览器可能存在背景不兼容问题。

仓库

demo