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

Javascript
javascript js cookie的存储,获取和删除
得到元素真实的背景颜色的js代码
js获取url参数的使用扩展实例
javascript 屏蔽鼠标键盘的几段代码
兼容IE FF Opera的javascript最短的拖动代码
创建一个复制UBB软件信息的链接或按钮的js代码
js实现iframe动态调整高度的代码
浏览器无法运行JAVA脚本的解决方法
js让弹出新窗口居中显示的脚本
js常见表单应用技巧
javascript 点击整页变灰的效果(可做退出效果)。
制作符合用户体验的漂亮的input输入框
img的onload的另类用法
解读IE和firefox下JScript和HREF的执行顺序
用javascrpt将指定网页保存为Excel的代码
语义化 H1 标签
JavaScript中Math对象使用说明
JavaScipt基本教程之前言
JavaScipt基本教程之JavaScript语言的基础
JavaScipt对象的基本知识

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 211 ::
收藏到网摘: 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初始化的顺序