🥕 ❤️ 👨‍👩‍👦‍👦 जावास्क्रिप्ट के साथ लंबवत स्क्रॉल 🤷🏻 🥙 🌫️

अक्सर विज्ञापन इकाइयों में आते हैं जहां पाठ लंबवत स्क्रॉल करता है। इस तरह के ब्लॉक को बनाने के लिए, आप कई तकनीकों का उपयोग कर सकते हैं: फ्लैश, सिल्वरलाइट, जावास्क्रिप्ट। मेरी समस्या को हल करने के लिए, मैंने जावास्क्रिप्ट का उपयोग किया। फायदों में से, हम यह पहचान सकते हैं कि अतिरिक्त प्लगइन्स को स्थापित करने की आवश्यकता नहीं है।

JQuery को एक सहायक ढांचे के रूप में चुना गया था। यह क्रॉस-ब्राउज़र संगतता की समस्या को हल करने में मदद करेगा।

कार्य

एक निश्चित चौड़ाई के ब्लॉक में पाठ संदेश (लिंक, चित्र) दिखाना आवश्यक है। संदेशों को बदले में प्रदर्शित किया जाना चाहिए। प्रदर्शन चक्र समय अंतराल तक सीमित नहीं है।

संभव समाधान

समाधान के विकल्प के रूप में, मैंने निम्नलिखित पर विचार किया:

प्रत्येक चरण पर, वह पाठ जोड़ें जो पहले से ही ब्लॉक के अंत में प्रदर्शित हो चुका है। इस प्रकार, सूची बढ़ेगी, लेकिन कभी खत्म नहीं होगी।
संदेशों की सूची को बारी-बारी से प्रदर्शित करें और जिस समय अंतिम संदेश प्रदर्शित होता है, उसे पहले स्क्रॉल करें। यह ऐसे लूप की गई सूची को बाहर कर देगा।
ब्लॉक में, संदेशों को प्रदर्शित करने के लिए केवल वर्तमान संदेश और निम्न को संग्रहीत करें। प्रत्येक चरण पर, सूची को अपडेट करें।

प्रस्तावित विकल्पों के फायदे और नुकसान

पहले विकल्प का उपयोग करते समय, निम्नलिखित नुकसान देखे गए थे: पांचवें पुनरावृत्ति के बाद कहीं, ब्लॉक "फ्लोट" करने के लिए शुरू हुआ, अर्थात्, सुधार की आवश्यकता थी; डेटा जो पहले ही दिखाया जा चुका है, ब्लॉक में रहता है, हालाँकि इसकी अब कोई ज़रूरत नहीं है। नतीजतन, थोड़े समय के बाद, ब्राउज़र "धीमा" होना शुरू हो जाता है।
विकल्प संख्या दो पहले से बेहतर है। कोई व्यर्थ डेटा संग्रहण नहीं है, लेकिन ब्लॉक अभी भी तैर रहा है।
विकल्प संख्या तीन समस्या का समाधान था।

कार्यान्वयन

जावास्क्रिप्ट कोड:

var scrollerstep = 1 ; var lefttime = 0 ; var scroll_interval = 5000 ; var scroll_speed = 50 ; var part = 1 ; var step = 50 ; var delta = 0 ; var delta_d = 1 ; var correct = 0 ; var step_l = 0 ; var scrol__data = new Array (); var scroll_text_id = 'scroll_text' ; var scroll_text_class = 'scroll_data' ; function scroll_add(str) { scrol__data[scrol__data.length] = str; } function set_Interval(interval){ scroll_interval = interval; } function set_Speed(speed){ scroll_speed = speed; } function runScroll() { if (part > scrol__data.length - 1 ) { $( '#' + scroll_text_id).css( 'top' , '0px' ); $( '#' + scroll_text_id).attr( 'innerHTML' , '' ); $( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[scrol__data.length - 1 ] + '</p>' ); part = 0 ; } if (part != 0 ) { $( '#' + scroll_text_id).css( 'top' , '0px' ); $( '#' + scroll_text_id).attr( 'innerHTML' , '' ); $( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[part - 1 ] + '</p>' ); } var c_data = '<p class="' + scroll_text_class + '">' + scrol__data[part] + '</p>' ; part = part + 1 ; step_l = 0 ; $( '#' + scroll_text_id).append(c_data); lefttime = setInterval( "scrollText()" , scroll_speed); } function scrollText() { currstop = parseInt ( - 1 * (step) - delta); if ( parseInt (step_l) >= currstop) { nextval = parseInt ($( '#' + scroll_text_id).css( 'top' )) - scrollerstep + 'px' ; step_l = step_l - scrollerstep; $( '#' + scroll_text_id).css( 'top' , nextval); } else { window .clearInterval(lefttime); } } function scroll_run(){ $( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[ 0 ] + '</p>' ); setInterval( "runScroll()" , scroll_interval); }

कनेक्शन और प्रारंभ:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <title> Vertical scroll </title> <script type= "text/javascript" src= "jquery.js" ></script> <script type= "text/javascript" src= "scroll.js" ></script> <style type= "text/css" > .scroll_data { display : block ; height :50px ; margin :0px ; padding :0px ; vertical-align : middle ; } .scroll_block { position : relative ; top :50px ; border :1px solid #DDDDDD ; width :400px ; height :50px ; overflow : hidden ; } .scroll_text { position : absolute ; right :0px ; top :0px ; width :100% ; } </style> </head> <body> <script type= "text/javascript" > $( document ).ready( function () { set_Interval( 3000 ); set_Speed( 30 ); scroll_add( 'string1' ); scroll_add( 'string2' ); scroll_add( 'string3' ); scroll_add( 'string4' ); scroll_add( 'string5' ); scroll_add( 'string6' ); scroll_run(); }); </script> <div class= "scroll_block" > <div id= "scroll_text" class= "scroll_text" > </div></div> </body> </html>

परिणाम

आप यहां काम का परिणाम देख सकते हैं ।
यहाँ स्रोत कोड डाउनलोड करें
आशा है कि यह समाधान मददगार होगा।

जावास्क्रिप्ट के साथ लंबवत स्क्रॉल

कार्य

संभव समाधान

प्रस्तावित विकल्पों के फायदे और नुकसान

कार्यान्वयन

परिणाम

More articles: