让zepto.js支持动画效果animate

admin

以实现用zepto.js实现文字上下无缝滚动为例；

主要是解决了zepto.js本身不支持animate动画函数的问题，zepto官方将animate写到了另外的一个类文件fx.js中。只要在zepto.js后引入fx.js即可使用animate动画函数。

fx.js可以去zepto官方的github上获取：https://github.com/madrobby/zepto/blob/master/src/fx.js

1. <div class="notice">
   
2.     <div class="text">
   
3.         <ul style="margin-top: 0px;">
   
4.             <li>
   
5.                 <a href="#">TODO</a>
   
6.             </li>
   
7.             <li>
   
8.                 <a href="#">TODO</a>
   
9.             </li>
   
10.             <li>
    
11.                 <a href="#">TODO</a>
    
12.             </li>
    
13.         </ul>
    
14.     </div>
    
15. </div>
    
16. <script type="text/javascript">
    
17.     $(function(){
    
18.         setInterval('autoScroll(".notice .text")',3000);
    
19.     });
    
20.     function autoScroll(obj){
    
21.         $(obj).find("ul").animate({
    
22.             marginTop : "-1rem"
    
23.         },500,function(){
    
24.             $(this).css({marginTop : "0px"}).find("li").slice(0, 1).appendTo($(this));
    
25.         })
    
26.     }
    
27. </script>

复制代码