现在给定画布上任意坐标，就能从该点开始向四周扩散完成碎片式的图片切换效果。
在自动轮播时，每次从预设好的8个点（四个角及四条边的中点）开始动画，8个点坐标如下：
| var randomPoint = [{ x: 0, y: 0 }, { x: I - 1, y: 0 }, { x: 0, y: J - 1 }, { x: I - 1, y: J - 1 }, { x: 0, y: Math.ceil(J / 2) }, { x: I - 1, y: Math.ceil(J / 2) }, { x: Math.ceil(I / 2), y: 0 }, { x: Math.ceil(I / 2), y: J - 1 }] |
点击时，则算出点击所在单元格坐标，从该点开始动画。
| function handleClick(e) { var offsetX = e.offsetX, offsetY = e.offsetY, j = Math.floor(offsetX / dw), i = Math.floor(offsetY / dh), //有了i, j，开始动画... }, |
目前该效果只是 Demo 阶段，有空的话会将该效果插件化，方便有兴趣的朋友使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
