利用Ajax实现的广告流动条的两种方式

一.实现飘浮广告:

<!DOCTYPE HTML PUBLIC "-//-W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script language="javascript" type="text/javascript">
var x1=10;
var y1=-10;
function fly()
{
flypic.style.top=parseInt(flypic.style.top) -y1;
flypic.style.left=parseInt(flypic.style.left) -x1;
if(parseInt(flypic.style.top)<0)
{y1=-y1;}
if(parseInt(flypic.style.top)>300)
{y1=-y1;}
if(parseInt(flypic.style.left)<0)
{x1=-x1;}
if(parseInt(flypic.style.left)>630)
{x1=-x1;}
window.setTimeout("fly()",300);
}
</script>
</head>
<body onload="fly()">
<div id="flypic" style="position:absolute;top:20;left:40">
<img src="Blue hills.jpg" alt="">
</div>
</body>
</html>

二.实现随滚动条滚动的漂浮广告

<!DOCTYPE HTML PUBLIC "-//-W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<script language="javascript" type="text/javascript">
function moveIt()
{
truck.style.top=document.body.scrollTop+parseInt(document.body.clientHeight)- 90;
window.setTimeout('moveIt()',1000);
}
</script>
</head>

（图片自己可以找一张）

posted @ 2008-04-09 15:44 小不点儿大的由我做主！阅读(139) 评论(0) 收藏举报

刷新页面返回顶部