Code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body, html { padding: 0; margin: 0; }
.hide { display: none; }
#banner {
position: absolute;
height: 30px;
line-height: 30px;
background-color: gray;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div id="banner" class="hide">
Hello World !
</div>
<br><br><br>
<input type="button" value="Show banner" onclick="banner.show('banner')">
<script type="text/javascript">
banner = {
height: 30,
step: 3,
delay: 30,
div: null,
timer: null,
y: 0,
show: function(name) {
this.step = - this.step
this.div = document.getElementById(name)
if (! this.timer)
{
this.y = this.step < 0 ? this.height : 0
this.timer = window.setInterval(this.topDown, this.delay)
this.div.style.top = - this.y + "px"
this.div.className = ""
}
},
topDown: function() {
var stop = false
banner.y += banner.step
if (banner.step < 0 && banner.y <= 0)
banner.y = 0, stop = true
if (banner.step > 0 && banner.y >= banner.height)
banner.y = banner.height, stop = true
if (stop)
window.clearInterval(banner.timer), banner.timer = null
banner.div.style.top = - banner.y + "px"
}
}
</script>
</body>
</html>
|