एक ब्लॉक में क्षैतिज स्क्रॉलिंग

क्षैतिज स्क्रॉलिंग एक बहुत ही मूल तकनीक है, अर्थात् मौलिकता किसी भी परियोजना की सफलता के मुख्य घटकों में से एक है।

यह कैसे काम करता है?

आकार सीमा के साथ एक ब्लॉक (कंटेनर) बनाया जाता है, एक बड़ा ब्लॉक (स्लाइडर) कंटेनर में रखा जाता है, जिसमें सामग्री (खंड) के साथ ब्लॉक होते हैं।



कंटेनर ब्लॉक में, हम स्लाइडर ब्लॉक का केवल एक हिस्सा देखेंगे, जैसा कि नीचे दिए गए आंकड़े में दिखाया गया है।





एक निश्चित कार्रवाई के साथ, स्लीडेरा ब्लॉक चलता है और इस प्रकार इसका दृश्य भाग बदलता है, जैसा कि नीचे दिए गए आंकड़े में दिखाया गया है।







मुझे लगता है कि अब सब कुछ सबके लिए स्पष्ट है :)

कार्यान्वयन

स्लाइडर ब्लॉक के आंदोलन के साथ सभी ऑपरेशन प्रसिद्ध जावास्क्रिप्ट म्यूटूल लाइब्रेरी की मदद से होंगे।



HTML कोड बहुत ही सरल है। सबसे पहले, हेड टैग के बीच नीचे कोड डालकर म्यूटूलस लाइब्रेरी को कनेक्ट और कॉन्फ़िगर करें ।

  <script type = "text / javascript" src = "mootools.svn.js"> </ script>

 <script type = "text / javascript">
 window.addEvent ('पहले से ही', फ़ंक्शन () {
 var स्क्रॉल = नया स्क्रोलर ('कंटेनर', {क्षेत्र: 100, वेग: 1});
 $ ('कंटेनर')। AddEvent ('माउसओवर', scroll.start.bind (स्क्रॉल));
 $ ('कंटेनर')। AddEvent ('माउसआउट', scroll.stop.bind (स्क्रॉल));
 });
 </ Script> 

अगला, सभी आवश्यक ब्लॉक बनाएं।

  <div id = "कंटेनर">

 <div class = "स्लाइडर">

 <div class = "अनुभाग"> अनुभाग 1 सामग्री </ div>
 <div class = "अनुभाग"> अनुभाग 2 सामग्री </ div>
 <div class = "अनुभाग"> अनुभाग 3 सामग्री </ div>
 <div class = "अनुभाग"> अनुभाग 4 सामग्री </ div>
 <div class = "अनुभाग"> अनुभाग 5 सामग्री </ div>

 </ Div>

 </ Div> 

अब यह सब करना बाकी है

  # संयोजक {

 चौड़ाई: 780px;
 ऊँचाई: 440px;
 बॉर्डर: 8px ठोस #FFF;
 अतिप्रवाह: ऑटो;
 मार्जिन: 0 ऑटो;
 अतिप्रवाह-एक्स: छिपा हुआ;
 अतिप्रवाह-य: छिपा हुआ;

 }
 .स्लाइडर {

 चौड़ाई: 2000 पीएक्स;
 ऊंचाई: 400px;
 गद्दी: 20 पीएक्स;
 पृष्ठभूमि: #CCCCCC;

 }
 .स्नेह {

 मार्जिन: 0;
 चौड़ाई: 220 पीएक्स;
 फ्लोट: बाएं;
 मार्जिन-राइट: 50px;

 } 

वह सब है! हो गया ^ _ ^

उदाहरण देखें



उदाहरण डाउनलोड करें

स्रोत चेरनेव। आरयू - सकारात्मक ब्लॉग