随笔分类 -  Javascript

Javascript
[Javascript][Mootools]跟随页面滚动的浮动层
摘要:这个东西经常用来做为浮动广告,不过也可以做成一个浮动的菜单条,有利于浏览者快速跳转。跟随页面滚动的原理是,将浮动层的定位坐标“top”值设置为页面的滚动高度即可。通过可选参数来设定动画移动的值,以及浮动元素离顶端的距离。还提供了一个属性isActive来设定是否跟随滚动,一个方法toggleActive来开关跟随效果。跟随页面滚动的浮动层[代码] 阅读全文

posted @ 2009-01-25 19:18 勤卓 阅读(1892) 评论(0) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(七)
摘要:在已有的Tabs类基础上,还可以继续往下扩展,如,加上对Tabs的拖动排序功能等,不过我不想继续了。最后这篇是通过CSS的设定,让Tabs类表现出更多的用途,比如实现折叠菜单,折叠内容,轮换图片等。详细应用可见示例:Tabs 扩展应用 阅读全文

posted @ 2009-01-19 14:24 勤卓 阅读(278) 评论(0) 推荐(0)

[Javascript][Vector3D类]旋转效果(四)
摘要:使用Vector3D类来完成鼠标移动旋转元素,元素将同时绕着X轴和Y轴旋转,看多了眼很花。用Vector和Vector3D完成的这些效果执行效率都不高,而且视觉效果也不算好,写了这些东西出来,只是为了好玩而已,另外也可以用来熟悉如何将常见的视觉效果用代码来实现。旋转效果示例[代码] 阅读全文

posted @ 2009-01-16 14:30 勤卓 阅读(409) 评论(0) 推荐(0)

[Javascript][Vector3D类]旋转效果(三)
摘要:这节将使用Vector3D类来完成旋转效果(一)的效果,两节的代码逻辑保持一致,大多数代码也相同,不过这节采用了Vector3D类来完成,实现了三维视觉的旋转效果。另外,再加上了是绕X轴还是Y轴旋转的判断,实现了两种不同的旋转方式。旋转效果示例一旋转效果示例二[代码] 阅读全文

posted @ 2009-01-16 11:57 勤卓 阅读(546) 评论(0) 推荐(0)

[Javascript][Vector类]旋转效果(二)
摘要:这个旋转效果是我在看到一个FLASH后想到用Javascript来实现下,于是便有了这个效果,通过鼠标来移动来旋转圆环,旋转的方向与鼠标移动的方向相反。相较于Flash,我这个JS版的效果与效率都大打折扣,纯粹是我想看看能否通过Vector类来完成这些东西罢了。旋转效果(二)与旋转效果(一)相比,有好几个相同的方法,可以通过Mootools.js里Class类的extend或者implement方... 阅读全文

posted @ 2009-01-15 17:20 勤卓 阅读(508) 评论(1) 推荐(0)

[Javascript][Vector类]旋转效果(一)
摘要:Vector类和Vector3D类是我去年在看了Robert Penner的书《Flash MX编程与创意实现》之后用Javascript写了一遍。虽然这书很旧,讲解的Flash版本也早已过时,但是书里的内容却从未过时,在Robert的著作里,他揭示了视觉效果与代码之间的联系。Robert是我非常敬佩的一位程序开发人员,他对Flash的影响也可谓是深远的,他所研究出来的缓动公式(ease)可以说影... 阅读全文

posted @ 2009-01-15 15:38 勤卓 阅读(809) 评论(1) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(六)
摘要:今天这节的讲的是用AJAX获取内容,代码大部分与《Mootools Essential》最后的例子一样,Aaron Newton在他的这本书里对这个例子阐述的很详细,我不过稍微改动了一下,让它更适合于继承我所写的Tabs类。用AJAX获取内容有一点要考虑的是尽量不要重复的到服务器端获取同一内容,这段代码就对此做了处理,数据在得到之后,就不会再到服务器端获取。在示例中可以看到,当四个选项全点击之后,... 阅读全文

posted @ 2009-01-06 14:23 勤卓 阅读(349) 评论(0) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(五)
摘要:本来这节是想讲讲用AJAX获取选项卡的内容,但是在编写过程中,发现前两天写的第三节,动态创建和删除选项卡功能里有BUG,于是动手将BUG修正。改完后,一时兴起,决定把动态创建删除功能再次增强,现在不仅能创建静态内容选项卡,还能用AJAX获取内容并创建选项卡。另外新加了判断,如果选项卡已经创建,那么再点击新建不会再次创建新的选项卡,而是显示已经创建了的选项卡。addSection函数包括三个参数,第... 阅读全文

posted @ 2009-01-05 15:51 勤卓 阅读(358) 评论(0) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(四)
摘要:今天要实现的功能是选项卡的自动轮换,我原来用Prototype.js写了一个简单的选项卡,并用类继承的方式完成了此项功能。 Mootools.js一样能轻松实现类的继承,Mootools.js实现类的继承是通过Class的Extends属性完成的。 自动轮换功能的思路是:通过setInterVal函数来调用自动切换选项卡函数,并从用户体验的角度考虑,实现当鼠标移到选项卡上时停止轮换,离开后继续... 阅读全文

posted @ 2009-01-04 14:51 勤卓 阅读(324) 评论(0) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(三)
摘要:在这一节里,我将继续对Tabs类进行扩展,加上动态添加和删除选项卡的功能。 这个功能是我在看到126邮箱里用选项卡来查看邮件后,想到在Tabs类也实现相应的功能 思路如下: 添加新选项卡函数有四个参数,分别是新加标签的文本,新加内容的文本,新加选项卡的位置以及在选项标签上加入删除的按钮。 用传入的参数分别建立Element片段,加入到选项卡标签数组及选项卡内容数组,并将Element片段插入... 阅读全文

posted @ 2009-01-03 23:44 勤卓 阅读(387) 评论(0) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(二)
摘要:在这一节里,我将对在上一节完成的基础上,对Tabs类进行扩展,加上自定义事件以及动画效果。 Mootools通过类的implements属性,实现类似于接口的功能,比如我们在Tabs类的implements属性加上Events,就可以让Tabs类获得Events类下的所有方法,其中的fireEvent方法就是让Tabs类获得了自定义事件的能力。 然后我在Tabs类下的showSection方法... 阅读全文

posted @ 2009-01-02 20:57 勤卓 阅读(456) 评论(0) 推荐(0)

[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)(一)
摘要:我原来用Prototype.js写过几篇关于选项卡(Tabs)的日志,还用这个实例说明了一下Prototype.js的继承方式。前阵子回过头看看,发现当初的程序有很大的不足,最主要的是将前台XHTML代码的DOM结构写进了JS代码,未能实现XHTML和JS的解耦,通用性大大降低, 这阵子看了看Mootools.js,在《Mootools Essential》书里最后的实例也是用选项卡做为实例讲解... 阅读全文

posted @ 2008-12-29 12:42 勤卓 阅读(443) 评论(0) 推荐(0)

[Javascript]onbeforeunload事件
摘要:同事说想要用户离开当前页面时执行一个事件,我能想到的就是window.onunload和window.onbeforeunload两个事件。比如原来关闭窗口时经常会遇到跳出个广告窗口就是这么做的。 而window.onbeforeunload是在关闭窗口前执行,因此,我们还可以利用它做点别的东西,前两天玩开心网的买房子组件,如果你在动了房子内的摆设而没有保存的就想要离开当前页的话,就会跳出个提示... 阅读全文

posted @ 2008-12-17 20:00 勤卓 阅读(1671) 评论(0) 推荐(0)

[Javascript][mootools]domready函数
摘要:我在Javascript编程中最喜欢的函数之一就是domready函数,这个函数可以让我们在页面dom载入完成后就执行页面上的函数,而不是象Javascript的原生事件window.onload,必须等待页面所有元素包括图片什么的完全载入才执行。 最近打算开始使用Mootools写点东西,然而,我在一开始就受到了一个打击。我发现Mootools的domready函数在IE下的执行表现可是叫我有... 阅读全文

posted @ 2008-12-17 17:37 勤卓 阅读(898) 评论(0) 推荐(0)