|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
A background image scroller in Javascript. The background of the image scrolls like a marquee. The direction of scrolling and the speed of scrolling can be set. More than one scrollers are prossible with different direction of scrolling and speed.
Examples are provided in the HTML file.
| <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> Scrolling Background </title>
<script>
<!--
var DefScrollSpeed = 10;
var DefScrollDirection = 'horizontal'; // (horizontal, vertical)
function BGScroller(ID, SD, SS, BG)
{
Elem = GetElem(ID);
if(!Elem)
{
return false;
}
else
{
if(BG)
{
Elem.style.backgroundImage = 'url("' + BG + '")';
}
SS = SS ? SS : DefScrollSpeed;
SD = SD ? SD : DefScrollDirection;
BGScroll(ID, SD, SS, 0);
}
}
function BGScroll(ID, SD, SS, Pos)
{
Elem = GetElem(ID);
Elem.style.backgroundPosition = (SD == 'horizontal') ? Pos++ : '0 ' + Pos++;
window.setTimeout('BGScroll("' + ID + '", "' + SD + '", ' + SS + ', ' + Pos + ' )', SS);
}
function BGScrollerInit()
{
// Creating background scroller
// Parameters are
// 1. Element Id
// 2. Scrolling Direction (horizontal, vertical)
// 3. Scrolling Delay (Smaller means faster)
// 4. Background Image
// Except (1) all other parameters are optional
BGScroller("Elem1", "vertical");
BGScroller("Elem2");
BGScroller("Elem3", "vertical");
BGScroller("Elem4", 'horizontal', 30, 'scrolling_horizontal.gif');
}
function GetElem(ID)
{
return document.all ? document.all[ID] : (document.getElementById(ID) ? document.getElementById(ID) : false);
}
//-->
</script>
<style type="text/css">
<!--
body{background:#F2F2F2;}
.tblScrolling{width:500px;height:500px;border:1px #C0C0C0 solid;font:bold 12px Arial;color:#333333;}
.tblScrolling td{vertical-align:middle;text-align:center;width:50%;height:50%;}
//-->
</style>
</head>
<body onLoad="BGScrollerInit()">
<table style="width:100%;height:100%;">
<tr><td>
<center><table cellspacing="0" class="tblScrolling">
<tr>
<td id="Elem1" style="background-image:url('scrolling_vertical.gif');">First Cell</td>
<td id="Elem2" style="background-image:url('scrolling_horizontal.gif');">Second Cell</td>
</tr>
<tr>
<td id="Elem3" style="background-image:url('scrolling_vertical.gif');">Third Cell</td>
<td id="Elem4" style="background-image:url('scrolling_horizontal.gif');">Fourth Cell</td>
</tr>
</table></center>
</td>
</tr>
</table>
</body>
</html> | |
|
|
| Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Clock at Status Bar
Categories : Java Script, HTML, Date Time | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Builds JavaScript that updates the contents of one selector based on another.
Categories : HTML, Java Script, PHP, Complete Programs, General | | | Java Script Based Navigation
Categories : HTML, Java Script, Navigation | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page?
Categories : Java Script, HTML | | | Prevent Right Mouse steal your graphics
Categories : HTML, Java Script, Security | | | day and week grid with clickable fields on/off and possibility to insert in DB
Categories : PHP, Java Script, CSS | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | |
|
|
|
