Posted in Javascript onNovember 09, 2010
就是图片切换的效果是可自定义的,通过这个组件,我们可以自定义出很多效果,不过这个东西还不算最终完成,现在搞出来先让大家试试
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<1) { 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<1) { 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(); }
组件代码下载
一个javascript图片阅览组件
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@