HTML:
Code
<div id="x" style="width: 300px; height:
50%; border-right: 5px dashed #eee; background: #555; position:
absolute; margin-left: -300px; margin-top: 100px;">
<span
style="color: white; font-weight: bold;">
Slide Panel
Pure
javascripts <img src="http://s104.ucoz.net/sm/1/biggrin.gif"
border="0" align="absmiddle" alt="biggrin"> )
Enjoy
it
</span>
</div>
Java Script (JS):
Code
<script
type="text/javascript">
function slide(obj, direction, a) {
clearInterval(window.z);
counter = 0;
z = setInterval(function () {
if (a ?
parseInt(obj.style.marginLeft) < 0 : parseInt(obj.style.marginLeft)
> -300) {
obj.style.marginLeft = parseInt(obj.style.marginLeft)
+ direction;
counter++;
} else {
clearInterval(z);
}
},
10);
}
var pad =
document.getElementById('x');
pad.onmouseover = function () {
slide(this,
3, true);
}
pad.onmouseout = function () {
slide(this,
-3, false);
}
</script>
