一周学会Mootools 1.4中文教程:(7)汇总收尾
转眼之间已经第七课了,这也将成为最后一课,如果这7课下来您感觉水平没有达到预想的水平,没关系您可以继续关注本站的博文,我会陆续发一些类似的文章帮您提升水平,另外我最近打算和群里的几个Mootools爱好者制作一下Mootools1.4的chm版中文API手册,如果您对此感兴趣可以来群里一起讨论(QQ群号:16648471)
我们今天的课程主要讲解一下Mootools的class,因为Mootools的class通常用于对插件的封装,所以讲完了class之后我会实际开发一个插件并详细说明插件的开发过程.
在Mootools中使用Class构造函数创建一个类有两种方式，也就是传递两种不同类型的参数给构造函数，第一种也是标准方式传递一个对象字面量，这个对象字面量可以包括你为类添加的所有属性、方法。例如：
var Person = new Class({
//初始化
initialize: function (name, age) {
this.name = name;
this.age = age;
},
//创建一个方法
log: function () {
console.log(this.name + ',' + this.age);
}
});
var mark = new Person('mark', 24);
mark.log(); // returns 'mark,24'
var Person = new Class(function (name, age) {
this.name = name;
this.age = age;
});
Person.implement('log', function () {
console.log(this.name + ',' + this.age);
});
var mark = new Person('mark', 24);
mark.log(); // returns 'mark,24'
当然推荐使用的还是第一种方式，直观明了。你如果使用标准方式建立了一个类，也是可以使用implement和Extends对类进行扩展或继承，当然了这部分内容已经超出了我们一周学会Mootools的范畴,所以如果您对此感兴趣可以看官方文档.
接下来我会开发一个插件,用来演示class的使用.这个插件的效果是:http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html
所不同的是,之前我是直接使用function实现的,而现在是使用class封装过了,下边是实现代码.
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<body id='a'>
<h2 class='a'>Single images</h2>
<div id='bsfdimg' style='background:url("http://www.eg-live.com.tw/@upload/2182/07_7e4cb.jpg") no-repeat scroll -50px -50px transparent;width:260px;height:200px;' w='392' h='600'></div>
<script type='text/javascript'> var MoveBKimg=new Class({
initialize:function(){//初始化
this.$L=0;
this.$T=0;
},
Todo:function(i,opt){
this.opt={
bw:opt.bw || 0, //容器宽度
bh:opt.bh || 0,
iw:opt.iw || 0, //图像宽度
ih:opt.ih || 0,
X:opt.X || 0, //鼠标的clientX坐标
Y:opt.Y || 0
};o=this.opt;
if(!i || !o.iw || !o.ih || !o.bw || !o.bh){return false;} o.iw=o.iw-o.bw; //图像实际可被移动的x轴范围
o.ih=o.ih-o.bh; var P=i.getStyle('background-position');P=P.split(" ");//取得目前背景图的position值,并拆分转为Int型
P[0]=P[0].toInt();P[0]=(P[0].abs()>o.iw)?((P[0]<0)?-o.iw:o.iw):P[0];//背景图目前的X偏移,并对值进行2次修正
P[1]=P[1].toInt();P[1]=(P[1].abs()>o.ih)?((P[1]<0)?-o.ih:o.ih):P[1]; console.log(o.X+'|'+o.Y);
if(o.X>this.$L){//往右移鼠标图片往左跑
this.$L=o.X;
P[0]=(o.iw<(P[0]-10))?o.iw:(P[0]-10);
}
if(o.X<this.$L){//往左移鼠标图片往右跑
this.$L=o.X;
P[0]=((P[0]+10)>0)?0:(P[0]+10);
}
if(o.Y>this.$T){//往下移鼠标图片往上跑
this.$T=o.Y;
P[1]=(o.ih<(P[1]-10))?o.ih:(P[1]-10);
}
if(o.Y<this.$T){//往上移鼠标图片往下跑
this.$T=o.Y;
P[1]=((P[1]+10)>0)?0:(P[1]+10);
}
i.setStyle('background-position',''+P[0]+'px '+P[1]+'px');//重新给背景图的position赋值
}
}); El=$('bsfdimg');//选择dom
var MoveBKimg=new MoveBKimg();//实例化class,在实例化的过程中会自动执行initialize,并创建两个变量赋值为0,这两个变量的作用是和鼠标目前的坐标做比对,这样才能知道鼠标是往什么方向移动了
El.addEvent('mousemove',function(event){//给dom节点绑定事件
//调用类的Todo方法,调用的时候传递dom节点和options
MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});
})
我说一下这一句:
MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y});
这里的El即为$('bsfdimg')
{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y}
这一句里的bw就是div容器的宽度,bh是div容器的高度,iw是图像的实际宽度,ih是图像的实际高度
图像的实际宽度和高度为了准确性所以我直接使用php取得并赋值的,当然了,你也可以使用其他任意你能想到的方法来取得图像宽度和高度.
X:event.client.x,Y:event.client.y
这两个分别是鼠标相应事件的坐标,不需要修改. event来自El.addEvent('mousemove',function(event){对事件的绑定时的传值. http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html
在上边这篇文章内的效果是使用了function,并没有使用class封装,大家可以比较一下二者的差异. 好了,我们的一周学会Mootools1.4到此也该画一个句号了. 如果感觉还是有所不足,推荐你阅读一下下边的几篇文章相信会对你有所帮助的
一周学会Mootools 1.4中文教程:(7)汇总收尾的更多相关文章
- 一周学会Mootools 1.4中文教程:序论
刚才发了几篇Mootools(以后直接简称Moo或Mt,看到这两个名字的时候不要感到奇怪),有一位热心的朋友"追杀"告诉我说现在已经出到1.4了,就不要再纠结于1.2了,想象一下有 ...
- 一周学会Mootools 1.4中文教程:(1)Dom选择器
利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...
- 一周学会Mootools 1.4中文教程:(6)动画
先看一下动画的参数设置: 参数: fps - (number:默认是50) 每秒的帧数. unit - (string:默认是 false) 单位,可为 'px','em',或 '%'. link - ...
- 一周学会Mootools 1.4中文教程:(5)Ajax
ajax在我们前台的开发中是非常重要的,所以我们单独拿出一节课来讲述,首先我们看一下mootools的ajax构成 语法: var myRequest=new Request([参数]); 参数: u ...
- 一周学会Mootools 1.4中文教程:(3)事件
今天我們講解一下mt的事件部分,对于事件的讲解主要包含三部分,分别是:绑定,移除,和触发,我们首先来看一个例子 //jquery的事件绑定方式$('a').click(function){ alert ...
- 一周学会Mootools 1.4中文教程:(4)类型
Mootools的类型主要包含下边几部分:String:字符串;Number:数字;Array:数组;Object:对象;Json:;Cookie:. 这也是我们今天的讲述重点.每一种数据类型Mt都为 ...
- 一周学会Mootools 1.4中文教程:(2)函数
温故: 透过对上一节课的学习,相信大家对mt的选择器应该有了一定的认识了,我再放几个小示例让大家对选择器的复杂应用有所了解: <!DOCTYPE html PUBLIC "-//W3C ...
- 苹果Swift语言中文教程资源汇总
苹果swift语言中文教程(零)搭配环境以及代码执行成功http://vjiazhi.com/kaifa/1014.html 苹果Swift语言中文教程(一)基础数据类型 http://vjiazhi ...
- 一周学会go语言并应用 by王奇疏
<一周学会go语言并应用> by王奇疏 ( 欢迎加入go语言群: 218160862 , 群内有实践) 点击加入 零.安装go语言,配置环境及IDE 这部分内容不多,请参考我的这篇安装环境 ...
随机推荐
- sql server 存储过程分隔split
CREATE FUNCTION [dbo].[F_split] ( ), ) ) , ), f )) --实现split功能 的函数 AS BEGIN DECLARE @i INT SET @Sour ...
- Linux学习netstat
netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...
- struts2 日期标签
<td align="center"><s:date name="age" format="yyyy-MM-dd"> ...
- Docker容器的网络连接
Docker容器的网络连接 Docker容器的网络连接 我们用ifconfig命令来查看网络设备 我们可以看到上面有个叫docker0的网络设备,docker守护进程就是通过docker0为docke ...
- Eclipse --Type /com.xx.app/gen already exists but is not a source folde解决方案
两种解决方案: Two actions, first: 1.Right click on the project and go to "Properties" 2.Select & ...
- html5的自定义data-*属性与jquery的data()方法的使用
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副 ...
- Orchard 源码探索（Application_Start）之异步委托调用
2014年5月26日 10:26:31 晴 ASP.NET 接收到对应用程序中任何资源的第一个请求时,名为ApplicationManager 的类会创建一个应用程序域.应用程序域为全局变量提供应用程 ...
- 强制删除正在连接的Oracle用户，以删除SDE用户为例
. 有时候想强制删除一个已经连接的Oracle用户,不能直接删除,可以用Kill会话信息. 比如今天想删除一个被连接的SDE用户,可以用以下方法删除一个“正在被连接”的用户. 1.查看所有用户的会话信 ...
- Oracle系列：记录Record
Oracle系列:记录Record 分类: [Oracle] (15) 版权声明:本文为博主原创文章,未经博主允许不得转载. Oracle系列:记录(Record) 一,什么是记录(Record) ...
- ThinkPHP中 按条件查询后列表显示
最近在项目中遇到了需要根据下拉框的条件筛选出符合条件的数据,然后进行列表显示的问题. 在ThinkPHP中进行列表显示的传统过程:通过在后台控制器中查询出数据,然后通过$this->assign ...