Senin, 16 Februari 2009
Take a look at this post a nice auto scrolling effect using javascript and dynamic HTML. It's useful to display your website headlines and latest news . Just you have to do very few modifications.
Watch this demo.
Live Demo
Download Script Live DemoAdd these three javascript files within the tag HEAD of the page.
<script language="javascript" src="js/dhtmllib.js"></script>
<script language="javascript" src="js/scroller.js"></script>
<script language="javascript" src="js/mydata.js"></script>
<script language="javascript" src="js/scroller.js"></script>
<script language="javascript" src="js/mydata.js"></script>
Demo.html
Contains javascript and HTML code. Div tag id placeholder to present your data.
<script language="javascript">
function runmikescroll()
{
var layer;
var mikex, mikey;
// Locate placeholder layer so we can use it to
// position the scrollers.
layer = getLayer("placeholder");
mikex = getPageLeft(layer);
mikey = getPageTop(layer);
// Create the first scroller and position it.
myScroller1.create();
myScroller1.hide();
myScroller1.moveTo(mikex, mikey);
myScroller1.setzIndex(100);
myScroller1.show();
}
window.onload=runmikescroll
</script>
<DIV id="tempholder"></DIV>
<DIV id="placeholder"></DIV>
mydata.js
Add headlines in mydata.js. Include your HTML tags inadditem(" ")
var myScroller1 = new Scroller(0, 0, 385,130, 0, 0);
//(xpos, ypos, width, height, border, padding)
myScroller1.addItem(" <span><h3>Scrolling Data 1</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 2</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 3</h3></span> ");
myScroller1.setPause(2000);
//set pause beteen msgs, in milliseconds
//(xpos, ypos, width, height, border, padding)
myScroller1.addItem(" <span><h3>Scrolling Data 1</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 2</h3></span> ");
myScroller1.addItem(" <span><h3>Scrolling Data 3</h3></span> ");
myScroller1.setPause(2000);
//set pause beteen msgs, in milliseconds
Download Script Live DemoNote : Best view open with Firefox and Safari brower.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Auto Scrolling Effect with javascript and DHTML.
