Apr

Create Simple Rounded News Scroller using Mootools.

ZeeShaN

Mootools is very easy to use library and has a large number of functionalities which reduce lot of our work to do. News scroller is used to put a section on your site which scrolls your data repeatedly. It adds an attractive look to your site.

Style Sheet. You may news slider design.

<style>
#slider-box {height:100px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px; width:700px; overflow:hidden; position:relative; border:1px solid #ccc; background:#eee;}
#slider-box ul{ position:absolute; top:0; left:0; list-style-type:none; padding:0; margin:0;}
#slider-box ul li { height:180px; font-size:12px; margin:0; padding:10px; overflow:hidden;}
<style>

Javascript Code:

window.addEvent('domready',function() {
			var records = $('slider-box').getFirst('ul');
			var items = records.getElements('li');
			var showDuration = 3000;
			var scrollDuration = 500;
			var index = 0;
			var height = items[0].getSize().y;
 
			var move = function() {
				records.set('tween',{
					duration: scrollDuration,
					onComplete: function() {
						if(index == items.length - 1) {
							index = 0 - 1;
							records.scrollTo(0,0);
						}
					}
				}).tween('top',0 - (++index * height));
			};
            window.addEvent('load',function() {
 
				move.periodical(showDuration);
			});
		});

HTML

<div id="slider-box">
  <ul>
      <li><strong style="font-size:14px;">99Points :: 1 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>
      <li><strong style="font-size:14px;">99Points :: 2 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href="#">More >></a></li>
      <li><strong style="font-size:14px;">99Points :: 3 </strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry.  <a href="#">More >></a></li>
   </ul>
</div>