使用模塊化管理工具seajs實現簡單動畫效果

時間 2019-11-13

標籤使用模塊化管理工具 seajs 實現簡單動畫效果简体版

原文原文鏈接

今天使用模塊化的管理工具seajs實現了一個簡單的動畫效果。css

seajs具備簡單友好的模塊定義規範。seajs遵循CMD規範，能夠像nodejs同樣編寫代碼。html

seajs具備天然直觀的代碼組織方式。依賴的自動加載，配置簡潔清晰。node

經過學習，發現seajs的使用是具備一個標準的格式的，以下define(function(require,exports,module){ //定義的代碼塊 });其中回調的參數名和順序都是不可改變的。jquery

此次小動畫實現的文件結構：數組

word.html代碼以下：dom

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         img{
 8             opacity: 0.5;
 9             transition-duration: 0.8s;
10         }
11     </style>
12     <script src='./sea.js'></script>
13     <script>
14         //使用定義好的js模塊
15         seajs.use('./game/contral.js',function(obj){});
16     </script>
17 </head>
18 <body>
19     <div id="container">
20         <img src="./img/h.png" alt="">
21         <img src="./img/h.png" alt="">
22         <img src="./img/h.png" alt="">
23         <img src="./img/h.png" alt="">
24         <img src="./img/h.png" alt="">
25         <img src="./img/h.png" alt="">
26     </div>
27 </body>
28 </html>

rotate.js代碼以下：模塊化

 1 define(function(require,exports,module){
 2     //引入jq，在這裏須要將jq作稍微的改動，
 3     //將jq的代碼也用seajs語法模塊化
 4     var $=require('../jquery.js');
 5     //定義函數，經過傳入容器id使全部的容器下的圖片運動起啦
 6     var RotateWord = function(id){
 7         this.container = $(id);
 8         this.icons = this.container.children(); //全部的圖片
 9         //定義一個方法的數組用來存放方法
10         this.arr = [];
11     }
12 
13     module.exports =RotateWord;
14     //定義一個隨機數
15     var random = function(num){
16         return Math.random()*num;
17     }
18 
19     //給RotateWord添加方法
20     RotateWord.prototype={
21         //初始化圖片的方法
22         _init:function(){
23             var arr = this.arr;
24             $(this.icons).each(function(index,item){
25                 var obj = $(item);  //將普通對象轉化爲jq對象
26                 var time;
27                 obj.hover(function(){
28                     obj.css('opacity',1).css('transform','rotate(0deg)');
29 
30                 },
31                 function(){
32                     obj.css('opacity',0.5);
33                     time && clearTimeout(time);
34                     time=setTimeout(rotateFn,Math.ceil(random(5000)));
35 
36                 });
37                 //定義一個旋轉的方法
38                 function rotateFn(){
39                    obj.css('transform','rotate('+random(360)+'deg)');
40                 }
41                 //將每個元素的方法保存起來
42                 arr[index]=rotateFn;
43             });
44         },
45         _rotate:function(){
46             //讓元素在默認的狀況下有必定的旋轉
47             $(this.arr).each(function(n,fn){
48                 setTimeout(fn,Math.ceil(random(3000)));
49             });
50         },
51         render:function(){
52             //開啓動畫效果
53             this._init();
54             this._rotate();
55         }
56     }
57 })

control.js（用於管理各個分模塊，這個動畫效果案例只有一個分模塊頁面）代碼以下：函數

1 define(function(require,exports,module){
2     //導入定義好的模塊
3     var RotateWord =require('./rotate.js');
4     //建立對象，調用方法，實現動畫效果
5     var obj = new RotateWord('#container');
6     obj.render();
7 })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。