属性
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]]);
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]]);
标签:
图片浏览组件,PhotoLook
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。