This scripts is to simply create an HTML Element moving horizontally. Please follow these steps:

1) For the HTML codes, put all the moving elements inside the “movingElement” Division. Then put this division inside the parent one which is “movingWrapper”. Make sure that you have all the important attributes and the windows events.

<div id=”movingWrapper” style=”width: 100%; overflow: hidden” onmouseover=”stopMoving();” onmouseout=”continueMoving();”>
<div id=”movingElement” style=”width: 250px”>

<p>

Welcome to Javascript for HTML moving
</p>
</div>
</div>

2) For Javascripts, paste these code right under the “movingWrapper” Division in the HTML file:

<script type=”text/javascript”>
//Get wrapper division
var wrapper = document.getElementById(“movingWrapper“);
//Get wrapper division width
var width = wrapper.scrollWidth;

//Get Element to be moved
var element = document.getElementById(“movingElement“);
element.style.position = ‘relative’;

var step = 0.3;            //Moving step
var start = width;        //Start position. This example is for moving from right to left
var end = -element.scrollWidth;            //End position. Moving the element to the left until it completely disappears
var interval = 10        //Interval time

var int=self.setInterval(“move()”,interval);

var pos = start;        //Current position

//This moves the element
function move()
{
if (start < end)
pos += step;
else
pos -= step;

element.style.left = pos + ‘px’;

if (start < end)
if (pos > end) pos = wrapper.scrollWidth;
if (start > end)
if (pos < end) pos = wrapper.scrollWidth;
}

function stopMoving()
{
clearInterval(int);
}

function continueMoving()
{
int = self.setInterval(“move()”,10);
}
</script>

Done ! Enjoy