当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 漂亮的Slider效果类终于封装成功

Javascript
JQuery 获取和设置Select选项的代码
jQuery ctrl+Enter shift+Enter实现代码
jQuery学习2 选择器的使用说明
jQuery学习3:操作元素属性和特性
jQuery学习4 浏览器的事件模型
jQuery学习5 jQuery事件模型
jQuery 学习6 操纵元素显示效果的函数
jQuery学习7 操作JavaScript对象和集合的函数
jQuery库与其他JS库冲突的解决办法
JavaScript Event事件学习第一章 Event介绍
JavaScript Event学习第二章 Event浏览器兼容性
JavaScript Event学习第三章 早期的事件处理程序
JavaScript Event学习第四章 传统的事件注册模型
JavaScript Event学习第五章 高级事件注册模型
JavaScript Event学习第六章 事件的访问
JavaScript Event学习第七章 事件属性
JavaScript Event学习第八章 事件的顺序
js png图片(有含有透明)在IE6中为什么不透明了
JavaScript 读取元素的CSS信息的代码
基于mootools的圆角边框扩展代码

Javascript 中的 漂亮的Slider效果类终于封装成功


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 48 ::
收藏到网摘: n/a

Slider类的功能说明:
1、可以控制任何一个页面上存在的div
2、slider在滑动的同时还可以实现透明度的变化,整个过程更平滑、更美观
3、可控性强,通过多个参数实现不同大小的div不同方向、不同速度的滑动
4、调用方便,一句话即可初始化,slider的隐现控制更为简单,详情参见代码例子
关于Slider类实现过程的说明:
有感于现在的网站经常使用所谓Web2.0模式的div隐现效果,前一段自己在网页上要实现一个,尝试成功后又想封装一个类方便以后使用,也可以开放给大家使用,刚好还可以学习一下javascript的类编程方法(兄弟以前一直用微软的东西,对javascript不熟),过程当中遇到一点问题,就在51js上面发了一个帖子求助,本来也没有报太大希望,结果得到了caudex和he1a2s0两位朋友的讲解和帮助,顺利解决了问题,再次对二位表示衷心得感谢,当然顺便也要感谢一下FlyKing这位大侠的不屑和讥讽,因为这也给了我莫大的动力。
好了,废话不说,尽管我的实现方法肯定不是最好的,甚至比较原始和笨拙,但毕竟是实现了,拿出来奉献给大家,有看的上的就用一下吧。或者有更好方法的也给指教一下,我的邮箱[email protected],欢迎联系。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

Slider类的调用说明:
//关于如何使用这个代码的说明:
//上面的代码可以封装成为一个单独的js文件,然后包含在页面当中
//然后使用下面的代码进行slider初始化,一个页面可以使用多个slider,下面的代码必须在页面底部</body>之前,否则可能会报错
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

//参数分别代表的意义可以在代码顶端看到
//控制slider动作可以使用两种方式
//一种是使用初始化时声明的名字调用,比如topslider.show(),topslider.hide()
//另一种可以使用slider.names[0].show(),slider.names[0].hide(),下标取决于slider初始化的顺序