컴포넌트_이미지 특수 효과를 보는 자바스크립트 이미지

이미지 전환 효과는 이 구성 요소를 통해 사용자 정의할 수 있습니다. 그러나 아직 모든 사람이 사용해 볼 수 있는 것은 아닙니다.

코드 복사 코드는 다음과 같습니다.

var pola=new PhotoLook("contain");//PhotoLook 객체 생성

이 구성요소를 인스턴스화하는 명령문입니다. cantain은 구성요소를 사용하는 사람이 정의하는 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="알파(불투명도='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
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();
}



컴포넌트 코드 다운로드