Create Simple Rounded News Scroller using Mootools.
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.
|
1 2 3 4 5 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
|
1 2 3 4 5 6 7 |
<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> |
Recommended WordPress Themes Store
