Vertical Ticker עם MooTools

אני חושב שיש בערך מיליון Vertical news ticker שעובדים עם jQuery, אבל קשה למצוא Vertical ticker מספיק טוב שעובד עם MooTools. לפני מעט זמן הייתי צריך ליצור vertical news ticker ולמרבה הפליאה לא מצאתי בקלות כלי שעושה משהו כזה. אי לכך נרתמתי למשימה וריתכתי כלי כזה.

ראשית, לדוגמא:

  • אייטם מספר 1
  • אייטם מספר 2
  • אייטם מספר 3
  • אייטם מספר 4
  • אייטם מספר 5
  • אייטם מספר 6
  • אייטם מספר 7
  • אייטם מספר 8
  • אייטם מספר 9

איך הפלא הקטן הזה נעשה? ראשית, יצרתי את המבנה הבא:


<div id='ticker_container'>
<ul id='TickerVertical'>
<li>אייטם מספר 1</li>
<li>אייטם מספר 2</li>
<li>אייטם מספר 3</li>
<li>אייטם מספר 4</li>
<li>אייטם מספר 5</li>
<li>אייטם מספר 6</li>
<li>אייטם מספר 7</li>
<li>אייטם מספר 8</li>
<li>אייטם מספר 9</li>
</ul>
</div>

אחרי כן יש ליצור את ה-CSS:


#TickerVertical {
width:200px;
height:300px;
display:block;
float: right;
list-style:none;
margin:0;
padding:0;
position: relative;
}
#TickerVertical li {
display:block;
width:200px;
color:#333333;
text-align:right;
font-size:11px;
margin:0;
padding:6px;
float:right;
}
#ticker_container {
 height: 100px;
    overflow: hidden;
    padding-right: 10px;
    position: relative;
    text-align: right;
    width: 190px;
}

אחרי כן יש לדאוג שגרסת MooTools 1.2 ומעלה תהיה מותקנת – להכניס משהו כזה לתוך האתר שלכם:


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

ואחרי כן – לקוד עצמו – שימו לב ליישום שלו בתחתית הדף ולאפשרויות השונות:


var Ticker = new Class({
				setOptions: function(options) {
					this.options = Object.extend({
						speed: 1500,
						delay: 2000,
						onComplete: Class.empty,
						onStart: Class.empty
					}, options || {});
				},
				initialize: function(el,options){
					this.setOptions(options);
					this.el = $(el);
					this.items = this.el.getElements('li');
					var w = 0;
					var h = 0;

					w = this.el.getSize().x;
					this.items.each(function(li,index) {
						h += li.getSize().y;
					});
					
					this.el.setStyles({
						position: 'absolute',
						top: 0,
						left: 0,
						width: w,
						height: h
					});
					this.fx = new Fx.Morph(this.el,{duration:this.options.speed,onComplete:function() {
						var i = (this.current==0)?this.items.length:this.current;
						this.items[i-1].injectInside(this.el);
						this.el.setStyles({
							left:0,
							top:0
						});
					}.bind(this)});
					this.current = 0;
					this.next();
				},
				next: function() {
					this.current++;
					if (this.current >= this.items.length) this.current = 0;
					var pos = this.items[this.current];
					this.fx.start({
						top: -pos.offsetTop
					});
					this.next.bind(this).delay(this.options.delay+this.options.speed);
				}
			});
window.addEvent('domready', function() {
	var vert = new Ticker('TickerVertical',{speed:1000,delay:2000'});
});

ניתן לשנות את המהירויות של ההחלפה ומשך הזמן שכל חדשה מתעכבת. מאד פשוט וקל להטמעה.

כדאי תמיד להשאר מעודכנים! הרשמו לעדכונים של האתר במייל! - המייל יישלח כל יום ראשון בעשר בבוקר ויכיל אך ורק את המאמרים שהתפרסמו באינטרנט ישראל. ללא ספאם, ללא הצפות, ללא בלגנים. 🙂

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (אין הצבעות)


אל תשארו מאחור! יש עוד מה ללמוד!

הצטרפו לעדכונים!

העדכונים נשלחים אך ורק כאשר האתר מתעדכן.

רן בר-זיק

רן בר-זיק כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
ניתן ליצור איתי קשר באמצעות:
כתובת המייל שלי: info@internet-israel.com.
פרופיל הלינקדאין שלי
הטוויטר שלי
פרופיל הפייסבוק שלי
אני תמיד שמח לייעץ ולעזור, אך בשל עומס הפניות הרב, אני לא תמיד מצליח לענות במהירות.