JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010-11-09 00:00
941 查看
属性
speed :设置图片切换的速度
width:组件的宽度
height:组件的高度
cellStructures:可设置效果矩阵的行列例如{row:8,col:8}注意,这个行列要和效果矩阵switchTable的行列对应
方法
init():初始化
addswitchTable(switchTable):添加效果矩阵
add(url):添加图片
addswitchMethod(func,type):添加切换方法(例如淡出,滑出),现在功能未完整,type只能填"show"一个值
autoPlay(time):自动播放,自动播放的速度不会小于speed
stopAutoPlay():停止自动播放
goTo():跳转到某一张图片,必须处于没有自动播放状态才行
previous():上一页
next():下一页
例子,这个例子比起前文(介绍一个JS图片浏览组件)的例子,利用cellStructures改变了默认的矩阵的行列,并且展示了计数(1,2,3,4,5,6,GO)效果的图片切换
本次的配置代码
speed :设置图片切换的速度
width:组件的宽度
height:组件的高度
cellStructures:可设置效果矩阵的行列例如{row:8,col:8}注意,这个行列要和效果矩阵switchTable的行列对应
方法
init():初始化
addswitchTable(switchTable):添加效果矩阵
add(url):添加图片
addswitchMethod(func,type):添加切换方法(例如淡出,滑出),现在功能未完整,type只能填"show"一个值
autoPlay(time):自动播放,自动播放的速度不会小于speed
stopAutoPlay():停止自动播放
goTo():跳转到某一张图片,必须处于没有自动播放状态才行
previous():上一页
next():下一页
例子,这个例子比起前文(介绍一个JS图片浏览组件)的例子,利用cellStructures改变了默认的矩阵的行列,并且展示了计数(1,2,3,4,5,6,GO)效果的图片切换
本次的配置代码
var pola=new PhotoLook("contain");//建立PhotoLook对象 /*PhotoLook大小的设置*/ pola.width=240; pola.height=320; pola.cellStructures=[{row:8,col:8}]; /*添加图片*/ pola.add("http://img.overpic.net/thumbs/c/h/s/xchsypp84zbzof3ofu_s.jpg"); pola.add("http://img.overpic.net/thumbs/c/4/8/xc48uw6026mq5kuk2jzxg_s.jpg"); pola.add("http://img.overpic.net/thumbs/s/3/z/xs3zwhazx5db43ux8npmf_s.jpg"); pola.add("http://img.overpic.net/thumbs/l/n/u/xlnunh3z65oz4de4y5qs_s.jpg"); pola.add("http://img.overpic.net/thumbs/s/z/p/xszpf2cqu4la46wvve9n_s.jpg"); pola.add("http://img.overpic.net/thumbs/7/q/k/x7qk2am7qzgyi5s03bdxi_s.jpg"); pola.init(); /*淡出效果,效果可以自己做,自己添加,这个只是比较经典的(效果要接受一个参数,就是每一个小div,我们对它进行处理)*/ var fadeOut=function(div){ div.style.zIndex=1; div.style.opacity=0; div.style.filter="Alpha(Opacity='0')"; //div.filters.alpha.opacity=20; (function(div,opacity){ var hide=function() { opacity=opacity+0.1; div.style.opacity=opacity; div.style.filter="Alpha(Opacity='"+opacity*100 +"')"; if(opacity<1) { setTimeout(hide,100); } } hide(); })(div,0) } ; /*添加淡出效果(可以添加很多效果,并设定效果出现的顺序)*/ pola.addswitchMethod(fadeOut,"show"); /*添加效果矩阵,仔细看矩阵数字的分布就可以知道哥大概了,数字小的会先发生效果*/ pola.addswitchTable([[2,2,2,2,1,2,2,2], [2,2,2,1,1,2,2,2], [2,2,2,2,1,2,2,2], [2,2,2,2,1,2,2,2], [2,2,2,2,1,2,2,2], [2,2,2,2,1,2,2,2], [2,2,2,1,1,1,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[2,2,2,1,1,2,2,2], [2,2,1,2,2,1,2,2], [2,2,2,2,2,1,2,2], [2,2,2,2,1,2,2,2], [2,2,2,1,2,2,2,2], [2,2,1,2,2,2,2,2], [2,2,1,1,1,1,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[2,2,2,1,1,2,2,2], [2,2,1,2,2,1,2,2], [2,2,2,2,2,1,2,2], [2,2,2,1,1,2,2,2], [2,2,2,2,2,1,2,2], [2,2,1,2,2,1,2,2], [2,2,2,1,1,2,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[2,2,2,2,1,2,2,2], [2,2,2,1,1,2,2,2], [2,2,1,2,1,2,2,2], [2,1,2,2,1,2,2,2], [2,1,1,1,1,1,2,2], [2,2,2,2,1,2,2,2], [2,2,2,2,1,2,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[2,2,1,1,1,1,1,2], [2,2,1,2,2,2,2,2], [2,2,1,1,1,1,2,2], [2,2,2,2,2,2,1,2], [2,2,2,2,2,2,1,2], [2,2,1,2,2,2,1,2], [2,2,2,1,1,1,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[2,2,2,1,1,1,2,2], [2,2,1,2,2,2,1,2], [2,2,1,2,2,2,2,2], [2,2,1,1,1,1,2,2], [2,2,1,2,2,2,1,2], [2,2,1,2,2,2,1,2], [2,2,2,1,1,1,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[2,1,1,2,2,2,2,2], [1,2,2,1,2,1,1,2], [1,2,2,2,1,2,2,1], [1,2,1,1,1,2,2,1], [1,2,2,1,1,2,2,1], [2,1,1,2,2,1,1,2], [2,2,2,2,2,2,2,2], [2,2,2,2,2,2,2,2]]); pola.addswitchTable([[1,2,3,4,5,6,7,8], [2,3,4,5,6,7,8,9], [3,4,5,6,7,8,9,10], [4,5,6,7,8,9,10,11], [5,6,7,8,9,10,11,12], [6,7,8,9,10,11,12,13], [7,8,9,10,11,12,13,14], [8,9,10,11,12,13,14,15]]); pola.addswitchTable([[4,4,4,4,4,4,4,4], [4,3,3,3,3,3,3,4], [4,3,2,2,2,2,3,4], [4,3,2,1,1,2,3,4], [4,3,2,1,1,2,3,4], [4,3,2,2,2,2,3,4], [4,3,3,3,3,3,3,4], [4,4,4,4,4,4,4,4]]);
相关文章推荐
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例
- 网页图片延迟加载LazyLoad.js使用方法介绍和实例
- 两种方法调用Bootstrap3的Javascript组件:data属性定义和书写JS代码
- JS实现分页浏览横向图片(类轮播)实例代码
- 自定义属性之图片切换实例——代码简化、函数合并——JS学习笔记2015-5-30(第43天)
- JS创建事件的三种方法(实例代码)
- c# BackgroundWorker组件介绍(属性、方法、事件)
- js属性和方法的可见性:私有属性(方法),实例属性(方法),类属性(方法)
- 对javascript基本对象的属性以及方法的实例介绍
- 自定义属性之图片切换实例——初始化、实现切换效果——JS学习笔记2015-5-29(第42天)
- 三种动态加载js的jquery实例代码另附去除js方法
- vue.js模仿京东省市区三级联动的选择组件实例代码
- nodejs redis 发布订阅机制封装实现方法及实例代码
- JS代码同步文本框内容的实例方法
- JS实例:网页上图片延迟加载的JS代码
- asp.net MVC实现无组件上传图片实例介绍
- javascript预加载图片、css、js的方法示例介绍
- 基于Node的React图片上传组件实现实例代码
- 循环浏览图片的另一种方法—Gallery组件的使用