每天10个前端知识点：运动框架应用篇(下)

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

---

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容：打字依次显示效果、收起当前页放出下一页效果、分块运动、无缝幻灯片、带进度条的无缝幻灯片

---

10. 打字依次显示效果

效果示例

move框架应用 - 打字依次显示效果

11. 收起当前页放出下一页效果

效果示例

move框架应用 - 收起当前页放出下一页效果

12. 分块运动

1. 自定义行数R、列数C
2. 创建span
   计算oSpan的width、height、left、top、background-position

注意：先appendChild才能获取oSpan的offsetWidth和offsetHeight

3. 分步运动，依次显示span

优化：setInterval可用for循环+setTimeout替代，可设置行列相关时同一时间出现

    
点击随机变换
    

效果示例

move框架应用 - 分块运动

13. 仿Mac 感应变大效果

1. 感应距离：一般为500

比例：scale = 1 - c/500;

2. 勾股定理计算鼠标至图片中心距离

var a = getPos(aImg[i]).left + aImg[i].offsetWidth / 2 - oEvent.clientX;

var b = getPos(aImg[i]).top + aImg[i].offsetHeight / 2 - oEvent.clientY;

var c = Math.sqrt(a * a + b * b);

3. 计算方放大比例，范围为[0.5, 1]
   var scale = 1 - c / 500;
   scale < 0.5 && (scale = 0.5);
   aImg[i].style.width = scale * 80 + 'px';

    

        ![](img/per-1.png)
        ![](img/per-2.png)
        ![](img/per-3.png)
    

效果示例

move框架应用 - 感应变大效果

---

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

微信公众号：无媛无故