Heim > Web-Frontend > js-Tutorial > 一个javascript图片阅览组件_图象特效

一个javascript图片阅览组件_图象特效

WBOY
Freigeben: 2016-05-16 18:16:49
Original
998 Leute haben es durchsucht

就是图片切换的效果是可自定义的,通过这个组件,我们可以自定义出很多效果,不过这个东西还不算最终完成,现在搞出来先让大家试试

复制代码 代码如下:

var pola=new PhotoLook("contain");//建立PhotoLook对象

这就是实例化这个组件的语句,cantain是你指定div的ID,这个是使用组件的人自己定义的
复制代码 代码如下:

/*PhotoLook大小的设置*/
pola.width=240;
pola.height=320;
/*添加图片*/
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.add("http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg");
pola.add("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg");
pola.add("http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_s.jpg");
pola.init();

定义组件大小,还有利用提供的add方法来添加图片,然后调用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{
setTimeout(hide,100);
}
}
hide();
})(div,0)

} ;

添加一个淡出效果,注意,这个效果不是一定的,我们可以自己做出其他效果,再调用addswitchMethod来添加进组件对象里:
/*添加淡出效果(可以添加很多效果,并设定效果出现的顺序)*/
pola.addswitchMethod(fadeOut,"show");

下面是下面那个试例的效果矩阵配置
复制代码 代码如下:

/*添加效果矩阵,仔细看矩阵数字的分布就可以知道哥大概了,数字小的会先发生效果*/
pola.addswitchTable([[1,2,3,4],[2,3,4,5],[3,4,5,6],[4,5,6,7]]);
pola.addswitchTable([[1,2,1,2],[2,1,2,1],[1,2,1,2],[2,1,2,1]]);
pola.addswitchTable([[1,2,3,4],[1,2,3,4],[1,2,3,4],[1,2,3,4]]);
pola.addswitchTable([[1,2,3,4],[12,13,14,5],[11,16,15,6],[10,9,8,7]]);
pola.addswitchTable([[1,2,3,4],[8,7,6,5],[5,6,7,8],[4,3,2,1]]);
pola.addswitchTable([[1,2,3,1],[3,4,4,2],[2,4,4,3],[1,3,2,1]]);
pola.addswitchTable([[1,1,4,4],[1,1,4,4],[3,3,2,2],[3,3,2,2]]);
pola.addswitchTable([[1,10,4,14],[9,3,13,7],[2,12,6,16],[11,5,15,8]]);

大家一看就应该知道效果矩阵和切换效果之间的关系了吧。
下面大家看看一个例子吧,对了,因为图片都是从互联网上面直接拿的,都没有经过处理,第一轮切换的时候会有点卡卡的感觉,但是当它所有图片都缓冲好的时候就不卡了,就可以看到完整的效果
以后会加上预加载的功能,就可以大大减少这种情况的影响了(话说这些图片也太大了,无奈不知怎么在博客园上传图片,或者根本就没得上传)
只有大家点击了“初始化”按钮之后才可以看到相册。。。
完整配置代码
复制代码 代码如下:

var pola=new PhotoLook("contain");//建立PhotoLook对象
/*PhotoLook大小的设置*/
pola.width=240;
pola.height=320;
/*添加图片*/
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.add("http://img.overpic.net/thumbs/b/7/w/xb7wghi7ivyxmbz7tb72e_s.jpg");
pola.add("http://img.overpic.net/thumbs/g/d/5/xgd532glxuyc7mmy2h99p_s.jpg");
pola.add("http://img.overpic.net/thumbs/i/m/f/ximfw3938obxo33qqjg_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{
setTimeout(hide,100);
}
}
hide();
})(div,0)

} ;


/*添加淡出效果(可以添加很多效果,并设定效果出现的顺序)*/
pola.addswitchMethod(fadeOut,"show");

/*添加效果矩阵,仔细看矩阵数字的分布就可以知道哥大概了,数字小的会先发生效果*/
pola.addswitchTable([[1,2,3,4],
[2,3,4,5],
[3,4,5,6],
[4,5,6,7]]);
pola.addswitchTable([[1,2,1,2],
[2,1,2,1],
[1,2,1,2],
[2,1,2,1]]);
pola.addswitchTable([[1,2,3,4],
[1,2,3,4],
[1,2,3,4],
[1,2,3,4]]);
pola.addswitchTable([[1,2,3,4],
[12,13,14,5],
[11,16,15,6],
[10,9,8,7]]);
pola.addswitchTable([[1,2,3,4],
[8,7,6,5],
[5,6,7,8],
[4,3,2,1]]);
pola.addswitchTable([[1,2,3,1],
[3,4,4,2],
[2,4,4,3],
[1,3,2,1]]);
pola.addswitchTable([[1,1,4,4],
[1,1,4,4],
[3,3,2,2],
[3,3,2,2]]);
pola.addswitchTable([[1,10,4,14],
[9,3,13,7],
[2,12,6,16],
[11,5,15,8]]);

/*给各按钮添加事件处理程序,这部分已经不算配置PhotoLook了*/
var buttonautoPlay=document.getElementById("autoPlay");
buttonautoPlay.onclick=function(){
pola.autoPlay(4000);
}
var buttonstopAutoPlay=document.getElementById("stopAutoPlay");
buttonstopAutoPlay.onclick=function(){
pola.stopAutoPlay();
}
var buttonturn = document.getElementById("turn");
var textBox = document.getElementById("Text1");
buttonturn.onclick = function() {
pola.goTo(parseInt(textBox.value));
}
var buttonprevious = document.getElementById("previous");
buttonprevious.onclick = function() {
pola.previous();
}
var buttonnext = document.getElementById("next");
buttonnext.onclick = function() {
pola.next();
}

组件代码下载
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage