JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码


Posted in Javascript onNovember 09, 2010

属性
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]]);
Javascript 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
jquery操作select方法汇总
Feb 05 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
一个javascript图片阅览组件
Nov 09 #Javascript
js中格式化日期时间型数据函数代码
Nov 08 #Javascript
window.location.hash 使用说明
Nov 08 #Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 #Javascript
JavaScript游戏之优化篇
Nov 08 #Javascript
javascript开发中因空格引发的错误
Nov 08 #Javascript
window.ActiveXObject使用说明
Nov 08 #Javascript
You might like
php 启动时报错的简单解决方法
2014/01/27 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python开发之for循环操作实例详解
2015/11/12 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
简单了解Python matplotlib线的属性
2019/06/29 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Django自带的用户验证系统实现
2020/12/18 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
教师申诉制度
2014/01/29 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
环保倡议书
2014/04/14 职场文书
个人年底工作总结
2015/03/10 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python