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

今天更新两篇，请叫我高产汪！
(,,• ₃ •,,)感觉天天在给自己打广告。

---

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

---

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

本次内容：运动时钟、返回顶部、无缝滚动、无缝幻灯片、带进度条的无缝幻灯片

---

5. 运动时钟

    

        

            
![](img/num.png)
            
![](img/num.png)
            
:
            
![](img/num.png)
            
![](img/num.png)
            
:
            
![](img/num.png)
            
![](img/num.png)
        
    

效果示例

move框架应用 - 动态时钟

6. 返回顶部

此例因为涉及documentElement，move.js中没有相关判断，所以用move.js原理写了一个

效果示例

move框架应用 - 返回顶部

7. 无缝滚动

此例资源为4张不重复图片，宽度为相应宽度*4

1. ul里的内容复制一份达到无缝的目的，再计算ul宽度

2. 模%求得余数

• 往左走(left负数)
  W = oUl.offsetWidth / 2;
  left -= 5;
  left = left % W;
• 往右走(left正数)
  W = oUl.offsetWidht / 2;
  left += 5;
  left = (left % W - W) % W;

    

        

            
![](img/slide1.jpg)
            
![](img/slide2.jpg)
            
![](img/slide3.jpg)
            
![](img/slide4.jpg)
        
        
        
    

效果示例

move框架应用 - 无缝滚动

8. 无缝幻灯片

1. ul里的内容复制一份达到无缝的目的，再计算ul宽度

2. 模%求得余数

• 往左走(left负数)
  W = oUl.offsetWidth / 2;
  left -= 5;
  left = left % W;
• 往右走(left正数)
  W = oUl.offsetWidht / 2;
  left += 5;
  left = (left % W - W) % W;

    

        ←
        →
        

            
![](img/slide1.jpg)
            
![](img/slide2.jpg)
            
![](img/slide3.jpg)
            
![](img/slide4.jpg)
            
![](img/slide5.jpg)
        
        

            

            

            

            

            

        
    

效果示例

move框架应用 - 无缝幻灯片

9. 带进度条的无缝幻灯片

    

        

            
1
            
2
            
3
            
4
            
5
        
        

            

            

            

            

            

        
    

效果示例

move框架应用 - 带进度条的无缝幻灯片

---

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

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

微信公众号：无媛无故