首页 > 代码库 > 使用模块化管理工具seajs实现简单动画效果

使用模块化管理工具seajs实现简单动画效果

2024-08-20 08:09:39   220人阅读

今天使用模块化的管理工具seajs实现了一个简单的动画效果。

seajs具有简单友好的模块定义规范。seajs遵循CMD规范，可以像nodejs一样编写代码。

seajs具有自然直观的代码组织方式。依赖的自动加载，配置简洁清晰。

通过学习，发现seajs的使用是具有一个标准的格式的，如下define(function(require,exports,module){ //定义的代码块 });其中回调的参数名和顺序都是不可改变的。

这次小动画实现的文件结构：技术分享

word.html代码如下：

 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 })

 

使用模块化管理工具seajs实现简单动画效果


联系
我们