🕞 👩🏾‍🚒 ⚖️ छवि परिवर्तन 🐃 ✍🏾 ⌚️

एक दिन, इंटरनेट पर, मैं एक अद्भुत गैलरी में आया - मैं पता भूल गया, लेकिन उसका विचार मेरी स्मृति में बना रहा। और एक साइट पर चित्रों के कुछ प्रकार के गैर-मानक परिवर्तन की आवश्यकता थी (क्षीणन और रेंगना पहले से ही उबाऊ थे) और इसलिए मुझे इसके बारे में याद आया।

क्या कहना है? छवि को भागों (चौकों, धारियों, आदि) में खोलने के लिए, और न केवल दिखाई देते हैं, बल्कि इसलिए कि यह सब प्रभाव से भरा होता है।

खैर, चलिए शुरू करते हैं।

पहले हम एक छोटा सा विन्यास करेंगे

change_img={
x:7,
y:10,
sort:4,
delay:{
st:5000,
animate:1000,
cadr:50
},
div_id: 'slider_photo'
}

* This source code was highlighted with Source Code Highlighter .

change_img={ x:7, y:10, sort:4, delay:{ st:5000, animate:1000, cadr:50 }, div_id: 'slider_photo' } * This source code was highlighted with Source Code Highlighter .

यहाँ मुझे लगता है कि सब कुछ सरल और स्पष्ट है। पंक्तियों / स्तंभों की संख्या, सॉर्टिंग का प्रकार (इसके बारे में बाद में), बदलते समय देरी और फोटो के साथ div की आईडी।

लब्बोलुआब यह है कि चित्रों के साथ हमारी div एक छोटी पृष्ठभूमि के साथ एक पोस्ट पृष्ठभूमि के साथ भरी हुई है और हम पहले से ही उन्हें घुमाएंगे जैसा हम चाहते हैं।

सबसे पहले, हमारे चौकों की चौड़ाई और ऊंचाई की गणना करें

r=$( '#' +change_img.div_id+ ' img' );
change_img_x=(r[0].height/change_img.x+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;
change_img_y=(r[0].width/change_img.y+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1;

* This source code was highlighted with Source Code Highlighter .

r=$( '#' +change_img.div_id+ ' img' ); change_img_x=(r[0].height/change_img.x+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1; change_img_y=(r[0].width/change_img.y+ '' ).replace(/(.*)\.(.*)/, "$1" )-1+1; * This source code was highlighted with Source Code Highlighter .

अब हमारे डिव को इन्हीं चौकों से भर दें

function create_div_img(){
x=0;
for (i=0;i<change_img.x;i++)
for (k=0;k<change_img.y;k++){

d= document .createElement( 'DIV' );
$(d).css({
position: 'absolute' ,
top:change_img_x*i+ 'px' ,
left:change_img_y*k+ 'px' ,
opacity:0,
'z-index' :10,
background: 'url("' +src_i[x]+ '")' ,
'backgroun-position' : '-' +(change_img_y*k)+ 'px-' +(change_img_x*i)+ 'px'
});
d.className= 'img_change_s_0' ;d.style.backgroundPosition= '-' +(change_img_y*k)+ 'px -' +(change_img_x*i)+ 'px' ;

document .getElementById( 'img_change_' +x).appendChild(d);
}
}

* This source code was highlighted with Source Code Highlighter .

function create_div_img(){ x=0; for (i=0;i<change_img.x;i++) for (k=0;k<change_img.y;k++){ d= document .createElement( 'DIV' ); $(d).css({ position: 'absolute' , top:change_img_x*i+ 'px' , left:change_img_y*k+ 'px' , opacity:0, 'z-index' :10, background: 'url("' +src_i[x]+ '")' , 'backgroun-position' : '-' +(change_img_y*k)+ 'px-' +(change_img_x*i)+ 'px' }); d.className= 'img_change_s_0' ;d.style.backgroundPosition= '-' +(change_img_y*k)+ 'px -' +(change_img_x*i)+ 'px' ; document .getElementById( 'img_change_' +x).appendChild(d); } } * This source code was highlighted with Source Code Highlighter .

खैर, सब कुछ सरल है - पूर्ण स्थिति के साथ वर्ग बनाने के लिए 2 चक्र

और अब फ़ंक्शन ही है जो इन भागों का एक सहज विस्तार बनाता है

function div_animate(){
s=0;
setTimeout(ferter,change_img.delay.cadr);
function ferter(){
if (s>=change_img.x*change_img.y) return ;
$(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate);
setTimeout(ferter,change_img.delay.cadr);
}
}

* This source code was highlighted with Source Code Highlighter .

function div_animate(){ s=0; setTimeout(ferter,change_img.delay.cadr); function ferter(){ if (s>=change_img.x*change_img.y) return ; $(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate); setTimeout(ferter,change_img.delay.cadr); } } * This source code was highlighted with Source Code Highlighter .

यहां भी, सब कुछ स्पष्ट है - समय से हम नए वर्ग के एनीमेशन को कहते हैं। मैंने सेटइंटरवल से इनकार कर दिया, क्योंकि जब आप ब्राउज़र को कम करते हैं और विस्तार (किसी भी) करते हैं, तो यह क्रैश हो जाता है और वर्ग लगभग एक साथ दिखाई देने लगते हैं।

अब, यदि आपने कोड को ध्यान से देखा, तो आपने arr_chagr array को देखा, जो कि (अभी तक) कहीं भी घोषित नहीं है और कुछ भी नहीं करती है।
यह सरणी वर्गों की उपस्थिति के अनुक्रम के लिए जिम्मेदार है। सबसे पहले, कॉन्फ़िगर में, हम सॉर्ट प्रकार (0-5) सेट करते हैं।

अब इस विशेषता पर विचार करें।

function get_array_change(x){
reff= new Array();
for (i=0;i<x;i++)reff[i]=i;
switch (change_img.sort){
default :
case 0: return reff; break ;
case 1: return reff.reverse(); break ;
case 2: return array_x(); break ;
case 3: return array_x().reverse(); break ;
case 4: return array_casc(); break ;
case 5: return array_casc().reverse(); break ;
}
function array_x(){
arr= new Array();es=0;
for (i=0;i<change_img.y;i++)
for (k=0;k<change_img.x;k++){
arr[es++]=reff[i+k*change_img.y];
}
return arr;
}
function array_casc(){
arr= new Array();sr=change_img.y-change_img.x;
es=0;rem_x=-1;fer_y=0;rif=-1;
for (i=0;i<change_img.x;i++){
rif++;gren=0;
rem_x+=rif+1;fer_y=rif;
keyt=rem_x;miss=0;
for (k=0;k<change_img.y;k++){
if (k)keyt+=fer_y;
if (fer_y<change_img.x&&!gren)fer_y++;
else {miss++} if (miss>=sr&&k){fer_y--;gren=1;}
arr[keyt]=reff[es++];
}
}
return arr;
}
}

* This source code was highlighted with Source Code Highlighter .

function get_array_change(x){ reff= new Array(); for (i=0;i<x;i++)reff[i]=i; switch (change_img.sort){ default : case 0: return reff; break ; case 1: return reff.reverse(); break ; case 2: return array_x(); break ; case 3: return array_x().reverse(); break ; case 4: return array_casc(); break ; case 5: return array_casc().reverse(); break ; } function array_x(){ arr= new Array();es=0; for (i=0;i<change_img.y;i++) for (k=0;k<change_img.x;k++){ arr[es++]=reff[i+k*change_img.y]; } return arr; } function array_casc(){ arr= new Array();sr=change_img.y-change_img.x; es=0;rem_x=-1;fer_y=0;rif=-1; for (i=0;i<change_img.x;i++){ rif++;gren=0; rem_x+=rif+1;fer_y=rif; keyt=rem_x;miss=0; for (k=0;k<change_img.y;k++){ if (k)keyt+=fer_y; if (fer_y<change_img.x&&!gren)fer_y++; else {miss++} if (miss>=sr&&k){fer_y--;gren=1;} arr[keyt]=reff[es++]; } } return arr; } } * This source code was highlighted with Source Code Highlighter .

यह सरणी में तत्वों की x-संख्या (arr_chagr = get_array_change (change_img.x * change_img.y);) मिलती है;
खैर, पहला 2 मामला सब कुछ स्पष्ट है - एक सरल और विस्तारित सरणी।

अगला 2 मामला आता है - एक ही बात, लेकिन केवल लंबवत (array_x () फ़ंक्शन) को सॉर्ट करना।

और आखिरी वाले कैस्केडिंग कर रहे हैं। मुझे इसे शब्दों में वर्णित करना बहुत मुश्किल लगता है - मैं केवल यह कहूंगा कि यह छँटाई केवल तभी काम करती है जब स्तंभों की संख्या> पंक्तियों की संख्या। (change_img.y> change_img.x)।

कैस्केडिंग के बारे में कुछ और - समस्या यह भी थी कि पहली बार में चित्र जल्दी से खुल जाता है, लेकिन जब यह बीच में आता है तो यह धीमा और धीमा होने लगता है। खैर, सिद्धांत रूप में, यह सही है - पहले विकर्ण को प्रदर्शित करने के लिए, 1 वर्ग की आवश्यकता होती है, 2 - 2. केंद्र में विकर्ण की अधिकतम संख्या - 7 होती है, जो 1 विकर्ण से 7 गुना अधिक है, 2 से 3.5 गुना अधिक है, आदि। घ।
मुझे मानक फ़ंक्शन div_animate () के साथ प्रतिस्थापित करना था

function div_animate(){ s=0; if (change_img.sort==4||change_img.sort==5){ change_img.delay.cadr=regular; del_rem=change_img.x*change_img.y/2; } setTimeout(ferter,change_img.delay.cadr); function ferter(){ if (s>=change_img.x*change_img.y) return ; $(referrer[arr_chagr[s++]]).animate({opacity:1,width:change_img_y,height:change_img_x},change_img.delay.animate); if (change_img.sort==4||change_img.sort==5){ if (s<del_rem)setTimeout(ferter,change_img.delay.cadr-=change_img.delay.cadr/25); else setTimeout(ferter,change_img.delay.cadr+=change_img.delay.cadr/25); } else setTimeout(ferter,change_img.delay.cadr); } } * This source code was highlighted with Source Code Highlighter .

लब्बोलुआब यह है कि - जब तक स्क्रिप्ट आधे वर्गों को पार कर गई है, तब तक उन्हें खोलने के बीच का अंतराल मानक अंतराल / 25 (change_img.delay.cadr / 25) से बढ़ता है और फिर उसी संख्या में एमएस बढ़ता है। नतीजतन, छवि प्रदर्शन की शुरुआत और मध्य के बीच की गति में अंतर लगभग ध्यान देने योग्य है

खैर, यह सब है।

इस सब के लिए html कोड

"slider_photo"> "/template/img/1.jpg" /> "/template/img/2.jpg" "slider_photo"> "/template/img/1.jpg" /> "/template/img/2.jpg" />
"/Template/img/3.jpg"

/>

* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

चित्रों का एक सुंदर परिवर्तन, जो किसी भी साइट में एकीकृत करना आसान है और अनुकूलित करना भी आसान है, तैयार है।
यहां तक कि IE में काम करता है।

दुर्भाग्य से, मैं एक उदाहरण नहीं दे सकता, क्योंकि छोटी जरूरत के कारण, कोई साइट नहीं है।
सभी कोड यहां देखे और डाउनलोड किए जा सकते हैं ।

यहां पर अपडेट किया जा सकता है

upd2 कोड बदल गया है। अब लगभग शुद्ध जेएस (jquery केवल एनीमेशन के लिए उपयोग किया जाता है) पर कार्यों द्वारा कार्यान्वित किया जाता है

छवि परिवर्तन

More articles: