Component_image の特殊効果を表示する JavaScript 画像

画像切り替えの効果はカスタマイズ可能です。ただし、これはまだ完成していません。

。コードをコピーします コードは次のとおりです:

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; >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");//Create PhotoLook object
/*PhotoLook size settings*/
pola.width=240;
pola.height=320 ;
/*Add picture*/
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();
/*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, which is each small div, we process it)*/
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 (you can add many effects and set the order in which the effects appear)*/
pola.addswitchMethod(fadeOut,"show");

/*Add an effect matrix, look at the matrix numbers carefully You can get a rough idea of ​​the distribution of 🎜>[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]]);
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]]);

/* for each Add an event handler to the button, this part is no longer configuring 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();
}



Component code download