做vi的图有网站吗,js菜鸟教程,dw怎样制作网页,网站开发如何学习mootools【十】- window的扩展及多彩世界 一. Mootools 框架对 Window的扩展: 浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法#xff0c;但是我们也知道#xff0c;由于各大浏览器之间对标准的实现不统一#xff0c;导致很多方法功能上有所… mootools【十】- window的扩展及多彩世界 一. Mootools 框架对 Window的扩展: 浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法但是我们也知道由于各大浏览器之间对标准的实现不统一导致很多方法功能上有所出入mootools为我们统一了我们最常用的一些方法 mootools的Window.Base.js里面主要实现了对DOM树创建完成的事件监听。以前我们可能经常把javascript代码写在html代码的最后面获者加上defer属性以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话javascript将获取不到目标元素而出错)但是这种方式看起来还是太杂乱保险系数也不是最高的。其实像ie的话可以根据document的readyState属性来判断文档树的建立状态而有些浏览器在创建文档树之后会触发onload事件mootools把这些都包装了起来形成一个统一的自定义事件domready你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法 window.addEvent(domready, function(){ alert(the dom is ready); }); 备注: ---这就是为什么只要用到 mootools框架的地方总是以给页面添加事件: window.addEvent(domready, function(){ //操作内容...}开始的原因. 这样这可保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话javascript将获取不到目标元素而出错) 另外有个快捷方法效果和以上相同 window.onDomReady(function(e){ alert(dom is ready!!!); }); mootools的Window.Size.js提供了一系列和浏览器window的尺寸有关的工具方法。 window的扩展方法 getWidth 获取window的当前高度(不包含滚动条的滚动量即当前能见 视野高度) getHeight获取window的当前宽度(不包含滚动条的滚动量即当前能见 视野宽度) getScrollWidth获取window的当前高度(包含了整个内容区域即可滚动 部分也计算在内) getScrollHeight获取window的当前宽度(包含了整个内容区域即可滚动 部分也计算在内) getScrollLeft获取window滚动的水平偏移量 getScrollTop获取window滚动的垂直偏移量 getSize获取window上面几个方法的提供的数据格式 { size: {x: this.getWidth(), y: this.getHeight()}, scrollSize:{x: this.getScrollWidth(),y: this.getScrollHeight()}, scroll:{x: this.getScrollLeft(),y: this.getScrollTop()} } 二. 多彩的开始1 mootools中集成了一些非常好用的界面组件 也提供了非常好用的界面效果工具类。 mootools的界面库Moo.Fx的设计十分的讲究OO原则通过对提供了基本功能的基类的继承扩展出了不同功能的工具类和组件类。Fx.Base就是这样一个基础类它本身实现了Events,Chain,Options三个类它包含了界面效果的最基本的动作和属性 构造方法的可选属性 onStart效果开始前执行的方法默认是一个空的function。你可以指定你 的function。 onComplete完成效果后执行的方法默认是一个空的function。你可以指 定你的function。 onCancel中断效果后执行的方法默认是一个空的function。你可以指定 你的function。 transition效果的过渡变换所使用的方程用来描述效果的变化规律。你可 以在Fx.Transitions类中找到其他的方程默认使用的是 Fx.Transitions.sineInOut(即正弦) duration变化频率毫秒。默认为500。 unit变化量的单位。默认是px,你可以指定如em,%之类。 wait true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果 执行结束。默认为true fps帧频。即每秒所执行的变换次数。默认为30帧/秒。 方法 set不经过过渡变换效果直接设置为指定的值 var myFx new Fx.Style(myElement, opacity).set(0); start执行效果让指定的开始值过渡变换到指定的结束值 var myFx new Fx.Style(myElement, opacity).start(0,1); stop中断效果的执行如果指定了参数为false,则会执行onCancel指定的 方法。 最后如果要查看有哪些变换方程可以选用可以看Fx.Transitions.js里的Fx.Transitions类里面提供了非常之多的变换方程具体的效果差别自己去一个个去试试看吧。 三. 多彩的开始2 Fx.Base类它是mootools效果库Fx的基础而平时会使用最频繁的就是Fx.Style类它是直接继承了Fx.Base类的。这个效果类非常强大基本上可以实现对CSS样式中任何一个属性的过渡变换。 Fx.Base中提供的方法在Fx.Style中都能用用法是相同的其他扩展的方法如下 方法 hide如同调用Fx.Base的set方法并且参数为0即set(0),当效果作 用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个 方法的效果是隐藏元素。 var myFx $(myDiv).effect(width, {duration: 1000}); myFx.hide(); start在两个区间之间进行过渡变换和Fx.Base的start用法一样。 var marginChange new Fx.Style(myElement, margin-top, {duration:500}); marginChange.start(10);//从myElement当前的margin-top值过渡到10 marginChange.start(1,20); //myElement的margin-top值从1过渡到20 由于Fx.Style的引入Element又被扩展了一个实现效果的快捷方法 effect 具体用法如下 var myEffect $(myElement).effect(height, {duration: 1000, transition: Fx.Transitions.linear}); myEffect.start(10, 100); 想实现同时进行多个效果怎么做Fx.Styles就是提供这样功能的一个类它也是直接继承了Fx.Base的类可以像这样来使用它 var myFx new Fx.Styles(myDiv, {duration: 1000}); myFx.start({ width:[100,300], height:[100,200] }); 同样Effect由此多了一个effects快捷方法可以这样使用 var myFxs $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut}); myFxs.start({ height: [10, 100], width: [900, 300] }); 另外除了上面的两个类之外还有一个可以用来作转换效果的类Fx.Elements这个类可以按照指定的元素顺序来执行指定的效果就像这样 var myElementsEffects new Fx.Elements($$(a)); myElementsEffects.start({ 0: { //对第一个元素执行opacity和width的过渡变化 opacity: [0,1], width: [100,200] }, 1: { //对第二个元素执行opacity过渡变换 opacity: [0.2, 0.5] } }); 转载于:https://www.cnblogs.com/ziyiFly/archive/2008/09/11/1289262.html
