उद्देश्यjQuery का उपयोग कर डीआईवी के भीतर सामग्री को लगातार कैसे स्क्रॉल करें?
उद्देश्य एक निश्चित ऊंचाई और चौड़ाई के साथ एक एक कंटेनर है DIV है और स्वचालित रूप से लगातार खड़ी स्क्रॉल div कि भीतर HTML सामग्री है।
प्रश्न असल में मैं jQuery खड़ी ऊपर की तरफ (चाल) स्क्रॉल करने के लिए बच्चे को DIV का उपयोग कर नीचे कोड बना लिया है जब तक अपनी सीमांकन माता पिता बॉक्स जहां एनीमेशन तो पूरा करता है जो एक ईवेंट हैंडलर जो की स्थिति को रीसेट करता है चलाता है बाहर बच्चे डीआईवी और प्रक्रिया फिर से शुरू होता है।
यह ठीक काम करता है, इसलिए सामग्री रिक्त स्थान छोड़कर स्क्रॉल हो जाती है और फिर नीचे से शुरू होती है और स्क्रॉल हो जाती है।
मेरी समस्या यह है कि इसकी आवश्यकताएं सामग्री के लिए प्रकट होती हैं जैसे कि यह निरंतर दोहराया जा रहा है, बेहतर व्याख्या करने के लिए आरेख के नीचे देखें, क्या ऐसा करने का कोई तरीका है?
<div id="scrollingContainer">
<div class="scroller">
<h1>This is a title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at orci mi, id gravida tellus. Integer malesuada ante sit amet enim pulvinar congue. Donec pulvinar dolor et arcu posuere feugiat id et felis.</p>
<p>More content....</p>
</div>
</div>
alt text http://www.cameroncooke.com/playground/scrolling-example.gif
क्या मैं अब तक
HTML है: (मैं 3 पार्टी प्लग इन या पुस्तकालयों jQuery के अलावा अन्य का उपयोग नहीं करना चाहते हैं)
सीएसएस:
#scrollingContainer{
height: 300px;
width: 300px;
overflow: hidden;
}
#scrollingContainer DIV.scroller{
position: relative;
}
जावास्क्रिप्ट:
/**
* Scrolls the content DIV
*/
function scroll() {
if($('DIV.scroller').height() > $('#scrollingContainer').height()) {
var t = $('DIV.scroller').position().top + $('DIV.scroller').height();
/* Animate */
$('DIV.scroller').animate(
{
top: '-=' + t + 'px'
}
, 4000, 'linear', animationComplete);
}
}
function animationComplete() {
$(this).css('top', $('#scrollingContainer').height());
scroll();
}