活动页、商品促销，一块图在窗口里斜着飘，用户一眼能看到。碰到窗口边就换方向，像屏保里那块会弹的图标。悬停先停住看清楚，离开接着飘，右上角 X 关掉。
入口是 index.html。样式在 css/float.css，移动和关闭在 js/float.js。脚本先引 jQuery，再引 float.js。jQuery 掉到后面，$ 会挂。
飘窗动画功能用到哪些文件
html 里按这个顺序引：
页面就这三样：一块 #floatdivids，里面一张图，右上角关闭钮 #ClickRemoveFlo。图路径写在 img 的 src 上，本例是 img/BN2.jpg。维护的时候把入口指到 index.html 就行。
页面骨架
飘窗如何布局
#floatdivids 用 position: fixed，相对浏览器窗口定位，页面再往下滚，它也钉在视口里。宽 450、高 300，图用 width: 100%; height: 100% 铺满。z-index: 99 盖在正文上面，别被轮播、导航挡住。
关闭钮绝对定位在右上角。宽高不要写死，用 padding: 2px 6px 撑开，加上 cursor: pointer。背景给白色，叠在图上才看得清那个 X。
我第一次看也卡了一下：父级已经是 fixed，子级 absolute 是相对这块飘窗，不是相对整页。所以 top: 0; right: 0 就是飘窗自己的右上角。
宽高按设计稿改。图比例和盒子差太多会被拉变形，这时改盒子尺寸，或给图加 object-fit: contain。
飘窗如何在页面里移动
说白了就是每次把 left、top 加减一个步长。xPos、yPos 记当前位置，goRight、goDown 记这一帧往哪边走，step 是一步几个像素。
碰到左边或顶，方向改成往右、往下；碰到右边或底（窗口宽高减去飘窗自身宽高），方向反过来。本例 delay 写成 30 毫秒方便立刻看到在动，业务里一般也用 20～40 这个量级，再小会抖。
计时用 setTimeout 递归：这一帧画完，再约下一次。timer 存的是 setTimeout 返回的计时器 ID，必须留着，否则后面 clearTimeout 找不到它、停不掉。
窗口缩小后，飘窗可能已经在窗口外面。resize 时把坐标夹回可视范围，再写回 left、top。
$(function () { ... }) 里先调一次 startFloat()，页面打开就开始飘。
如何暂停和关闭飘窗
悬停要看图，就把计时清掉。离开再 startFloat。事件挂在 body 上委托，用 mouseenter / mouseleave：进到关闭钮上还在盒子里，不会误触发离开。mouseover / mouseout 会在子元素之间冒泡，图和 X 之间来回切时可能停了又开，看着像在抖。这坑我见过不止一次。
点 #ClickRemoveFlo 先 stopFloat，再 slideUp 半秒后把节点 remove。不先停表，节点没了定时器还在跑，会去改已经不存在的元素。
关闭钮自己要能点到，别被图片盖住。它写在 img 后面，又是绝对定位，叠在最上面。
如何对接到真实项目中
图不要写死。接口返回图片地址再赋给 img 的 src。点图要跳活动页，把链接写在 data-href 上。jQuery 这套建议用 Layui 做提示，具体按实际项目来定。接口失败走 layer.msg，不要 alert。
/api/ad/float 的路径和字段换成项目约定。下面这份覆盖 float.js，页面结构仍用前面的 html。
图片地址换成接口返回的 res.data.img，跳转地址用 res.data.href。没有接口就把 src 写成项目里的图路径。delay 和盒子宽高按设计改。
