A javascript image viewing component_image special effects

The effect of image switching is customizable. Through this component, we can customize many effects. However, this thing is not finalized yet. It is now ready for everyone to try

Copy code The code is as follows:

var pola=new PhotoLook("contain");//Create PhotoLook object

This is the statement to instantiate this component. cantain is the ID of the div you specify. This is defined by the person who uses the component.

Copy code The code is as follows:

/*PhotoLook size settings*/
pola.width=240;
pola.height=320;
/*Add pictures */
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();

Define the component size, and use the provided add method to add images, and then call init to initialize

Copy code The code is as follows:

/*Fade out effect, the effect can be made and added by yourself, this is just a more classic one (the effect needs to accept a parameter, that is, each small div, we will Processing) */
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)

};

Add a fade-out effect. Note that this effect is not certain. We can make other effects ourselves, and then call addswitchMethod to add them to the component object:
/*Add a fade-out effect (many effects can be added, and set the order in which the effects appear)*/
pola.addswitchMethod(fadeOut, "show");

The following is the effect matrix configuration of the following test example

Copy the code The code is as follows:

/*Add the effect matrix. If you look carefully at the distribution of the matrix numbers, you will know that I have a rough idea. The numbers are small. The effect will occur first*/
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]]);

Everyone should know the relationship between the effect matrix and the switching effect at a glance.
Let’s take a look at an example. By the way, because the pictures are taken directly from the Internet and have not been processed, there will be a bit of a lag in the first round of switching, but when all the pictures are When the buffer is good, it will no longer be stuck, and you can see the complete effect
In the future, a preloading function will be added, which can greatly reduce the impact of this situation (these pictures are also too big, I don’t know how Upload pictures in the blog park, or do not upload them at all)
The photo album can only be seen after everyone clicks the "Initialize" button. . .
Complete configuration code

Copy code The code is as follows:

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
Alpha(Opacity= '0') ";
//div.filters.alpha.opacity=20;
(function(div,opacity){
var hide=function()
{
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"); *효과 행렬을 추가하고 행렬 번호를 주의 깊게 살펴보면 🎜>[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.addwitchTable([[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]])
폴라 .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 버튼autoPlay=document.getElementById ("autoPlay");
buttonautoPlay.onclick=function(){
pola.autoPlay(4000 );
}
var 버튼stopAutoPlay=document.getElementById("stopAutoPlay")
buttonstopAutoPlay .onclick=function(){
pola.stopAutoPlay();
}
var 버튼턴 = document.getElementById("turn")
var textBox = document.getElementById("Text1");
buttonturn.onclick = function() {
pola.goTo(parseInt(textBox.value)) ;
}
var 버튼previous = document.getElementById("previous")
buttonprevious. onclick = function() {
pola.previous();
}
varbuttonnext = document.getElementById("next");
buttonnext.onclick = function() {
pola. next();
}



컴포넌트 코드 다운로드