इस जावास्क्रिप्ट एक स्क्रॉलिंग मार्की बनाता है जिसमें चित्र क्षेत्र जहां चित्र क्षैतिज रूप से प्रदर्शन क्षेत्र के माध्यम से चलते हैं। जैसा कि प्रत्येक चित्र प्रदर्शन क्षेत्र के एक तरफ से गायब हो जाता है, यह छवियों की श्रृंखला की शुरुआत में पढ़ा जाता है। यह मार्की में छवियों का एक निरंतर स्क्रॉल बनाता है जो छोरों - जब तक आपके पास मार्की डिस्प्ले क्षेत्र की चौड़ाई को भरने के लिए पर्याप्त छवियां हैं।
इस लिपि में कुछ सीमाएँ हैं, हालाँकि:
- छवियों को एक ही आकार (चौड़ाई और ऊंचाई दोनों) में प्रदर्शित किया जाता है। यदि चित्र भौतिक रूप से समान नहीं हैं, तो वे सभी आकार में बदल जाएंगे। इसका परिणाम खराब छवि गुणवत्ता हो सकता है, इसलिए अपने स्रोत चित्रों को लगातार आकार देना सबसे अच्छा है।
- छवियों की ऊंचाई मार्की के लिए निर्धारित ऊंचाई से मेल खाना चाहिए, अन्यथा, ऊपर बताए गए गरीबों के लिए छवियों को समान क्षमता के साथ आकार दिया जाएगा।
- छवियों की संख्या से गुणा की गई छवि की चौड़ाई मार्की चौड़ाई से अधिक होनी चाहिए। इसके लिए सबसे आसान फिक्स अगर अपर्याप्त चित्र हैं, तो अंतर को भरने के लिए सरणी में केवल छवियों को दोहराना है।
- इस स्क्रिप्ट की पेशकश की एकमात्र बातचीत स्क्रॉल को रोक रही है जब माउस को मार्की पर ले जाया जाता है और जब माउस छवि से हट जाता है तब फिर से शुरू होता है। हम बाद में एक संशोधन का वर्णन करते हैं जिसे सभी छवियों को लिंक में बदलने के लिए बनाया जा सकता है।
- यदि आपके पास एक पृष्ठ पर कई मार्के हैं, तो वे सभी एक ही गति से चलते हैं, इसलिए उनमें से किसी पर भी मूसिंग करना उन सभी को आगे बढ़ने से रोक देगा।
- आपको अपनी खुद की छवियों की आवश्यकता है। उदाहरणों में वे इस लिपि का हिस्सा नहीं हैं।
छवि मार्की जावास्क्रिप्ट कोड
सबसे पहले, निम्नलिखित जावास्क्रिप्ट की प्रतिलिपि बनाएँ और इसे सहेजें marquee.js।
इस कोड में दो छवि सरणियाँ हैं (उदाहरण पृष्ठ पर दो मार्केज़ के लिए), साथ ही उन दो मार्के में प्रदर्शित की जाने वाली जानकारी वाले दो नए mq ऑब्जेक्ट हैं।
आप उन वस्तुओं में से एक को हटा सकते हैं और दूसरे को अपने पेज पर एक निरंतर मार्की प्रदर्शित करने के लिए बदल सकते हैं या फिर अधिक मार्केज़ जोड़ने के लिए उन कथनों को दोहरा सकते हैं।
मार्कट को परिभाषित करने के बाद mqRotate फ़ंक्शन को पासिंग mqr कहा जाना चाहिए।
वरmqAry1 = [ 'ग्राफिक्स / img0.gif', 'ग्राफिक्स / img1.gif', 'ग्राफिक्स / img2.gif', '
ग्राफिक्स / img3.gif ',' ग्राफिक्स / img4.gif ',' ग्राफिक्स / img5.gif ',' ग्राफिक्स /
img6.gif ',' ग्राफिक्स / img7.gif ',' ग्राफिक्स / img8.gif ',' ग्राफिक्स / img9.gif ',
'ग्राफिक्स / img10.gif', 'ग्राफिक्स / img11.gif', 'ग्राफिक्स / img12.gif', '
ग्राफिक्स / img13.gif ',' ग्राफिक्स / img14.gif '];
वर
mqAry2 = [ 'ग्राफिक्स / img5.gif', 'ग्राफिक्स / img6.gif', 'ग्राफिक्स / img7.gif', '
ग्राफिक्स / img8.gif ',' ग्राफिक्स / img9.gif ',' ग्राफिक्स / img10.gif ',' ग्राफिक्स /
img11.gif ',' ग्राफिक्स / img12.gif ',' ग्राफिक्स / img13.gif ',' ग्राफिक्स / img14।
gif ',' ग्राफिक्स / img0.gif ',' ग्राफिक्स / img1.gif ',' ग्राफिक्स / img2.gif ','
ग्राफिक्स / img3.gif ',' ग्राफिक्स / img4.gif '];
फ़ंक्शन प्रारंभ () {
नया mq ('m1', mqAry1,60);
नया mq ('m2', mqAry2,60); // आवश्यकता के अनुसार अधिक से अधिक ईंधन के लिए दोहराएं
mqRotate (mqr); // आखिरी आना चाहिए
}
window.onload = start;
// निरंतर छवि मार्की
// कॉपीराइट 24 जुलाई 2008 को स्टीफन चैपमैन द्वारा
// http://javascript.about.com
// अपने वेब पेज पर इस जावास्क्रिप्ट का उपयोग करने की अनुमति दी गई है
// बशर्ते कि इस स्क्रिप्ट में नीचे के सभी कोड (इनमें शामिल हैं)
// comments) का उपयोग बिना किसी फेरबदल के किया जाता है
वर mqr = []; समारोह
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{क्लियरटाइम (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length;
(var के लिए
मैं 0 =; मैंthis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'पूर्ण'; this.mqo.ary [i] .style.left = (चौड़ा * i) + 'px';
this.mqo.ary [i] .style. उपलब्धता = चौड़ा + 'px'; this.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);};
function mqRotate (mqr) {अगर (! mqr) वापसी; के लिए (var j = mqr.length - 1; जे
> -1; j--) {maxa = mqr [j] .ary.length; के लिए (var i = 0; मैं;एमक्यूआर [जे] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
एमक्यूआर [जे] .ary [0] .style; अगर (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style. उपलब्धता) * मैक्सा) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);};
अगला, अपने पृष्ठ के मुख्य भाग में निम्नलिखित कोड जोड़ें:
एक स्टाइल शीट कमांड जोड़ें
हमें यह निर्धारित करने के लिए कि हमारे प्रत्येक मार्केज़ को कैसे देखना है, एक स्टाइल शीट कमांड जोड़ना होगा।
उदाहरण पृष्ठ पर लोगों के लिए हमारे द्वारा उपयोग किया गया कोड:
.marquee {स्थिति: रिश्तेदार;
छिपा हुआ सैलाब;
चौड़ाई: 500 पीएक्स;
ऊंचाई: 60 पीएक्स;
सीमा: ठोस काला 1px;
}
आप अपने मार्की के लिए इनमें से किसी भी गुण को बदल सकते हैं; हालाँकि, यह रहना चाहिए स्थिति: रिश्तेदार.
आप इसे अपनी बाहरी स्टाइल शीट में रख सकते हैं यदि आपके पास एक है या इसके बीच में संलग्न हैं आपके पृष्ठ के प्रमुख में टैग।
परिभाषित करें कि आप मार्की को कहां रखेंगे
अगला कदम अपने वेब पेज में एक डिव को परिभाषित करना है जहां आप छवियों के मार्की को जगह देंगे।
उदाहरण के पहले मार्केज़ ने इस कोड का उपयोग किया:
वर्ग इसे स्टाइलशीट कोड के साथ जोड़ता है जबकि आईडी वह है जिसका उपयोग हम नए mq () कॉल में छवियों के मार्की को संलग्न करने के लिए करेंगे।
सुनिश्चित करें कि आपके कोड में सही मूल्य शामिल हैं
इन सभी को एक साथ रखने के लिए अंतिम चीज़ यह सुनिश्चित करती है कि पृष्ठ लोड होने के बाद आपके जावास्क्रिप्ट में अपने ऑब्जेक्ट को mq में जोड़ने के लिए आपका कोड सही मान हो।
यहाँ उदाहरणों में से एक जैसा दिखता है:
नया mq ('m1', mqAry1,60);
- एम 1 हमारे डिव टैग की आईडी है जो मार्की को प्रदर्शित करेगा।
- mqAry1 छवियों की एक सरणी का संदर्भ है जो मार्की में प्रदर्शित किया जाएगा।
- अंतिम मान 60 हमारी छवियों की चौड़ाई है (चित्र दाईं से बाईं ओर स्क्रॉल करेंगे और इसलिए ऊंचाई वैसी ही है जैसी हमने शैली पत्रक में परिभाषित की है)।
अतिरिक्त मार्केज़ जोड़ने के लिए, हम अपने HTML में अतिरिक्त छवि सरणियों को सेट करते हैं, संभवतः सेट अप करते हैं अतिरिक्त कक्षाएं ताकि मार्के को अलग ढंग से स्टाइल किया जा सके, और हमारे पास जितने भी नए mq () स्टेटमेंट हैं शामियाने। हमें केवल यह सुनिश्चित करने की आवश्यकता है कि mqRotate () कॉल हमारे लिए मार्के को संचालित करने के लिए उनका अनुसरण करता है।
लिंक में मार्की इमेज बनाना
मार्की में छवियों को लिंक में बनाने के लिए आपको केवल दो बदलाव करने होंगे।
सबसे पहले, अपनी छवि सरणी को छवियों के एक सरणी से सरणी के एक सरणी में बदलें जहां प्रत्येक आंतरिक सरणियों की स्थिति 0 में छवि और स्थिति 1 में लिंक का पता है।
var mqAry1 = [
[ 'ग्राफिक्स / img0.gif', 'blcmarquee1.htm'],
[ 'ग्राफिक्स / img1.gif', 'blclockm1.htm'], ...
['ग्राफिक्स / img14.gif', 'bltypewriter.htm']];
दूसरी बात यह है कि स्क्रिप्ट के मुख्य भाग के लिए निम्नलिखित को प्रतिस्थापित करना है:
// निरंतर छवि मार्की लिंक के साथ
// कॉपीराइट 21 सितंबर 2008 स्टीफन चैपमैन द्वारा
// http://javascript.about.com
// अपने वेब पेज पर इस जावास्क्रिप्ट का उपयोग करने की अनुमति दी गई है
// बशर्ते कि इस स्क्रिप्ट में नीचे के सभी कोड (इनमें शामिल हैं)
// comments) का उपयोग बिना किसी फेरबदल के किया जाता है
var mqr = []; function mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = function () {mqRotate (mqr);}; this.mqo.onmouseover = function () {clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; के लिए (var i = 0; मैं;
लिंक के बिना मार्की के संस्करण के लिए आपको जो कुछ भी करने की आवश्यकता है वह बाकी है।