Javascript实现飞动广告效果的方法

2024-05-06 16:20:50

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了Javascript实现飞动广告效果的方法,可实现广告窗口的浮动显示效果,且广告窗口具有关闭功能,需要的朋友可以参考下

本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>飞动的广告</title>

<style type="text/css">

body,div,p

{

margin:0;

padding:0;

font-size:14px;

}

#divMain

{

width:200px;

height:800px;

}

</style>

<script type="text/javascript">

var tmrID;

var x = 1;

var y = 1;

function moveAD() {

var divFly = document.getElementById("divFly");

var moveX = parseInt(divFly.style.left) + x * 5;

var moveY = parseInt(divFly.style.top) + y * 5;

//divFly.offsetWidth

if ((moveX + divFly.offsetWidth) >= document.body.clientWidth) {

x = -1;

}

if ((moveY + divFly.offsetHeight) >= document.body.clientHeight) {

y = -1;

}

if (moveX <= 0) {

x = 1;

}

if (moveY <= 0) {

y = 1;

}

divFly.style.left = moveX;

divFly.style.top = moveY;

}

function ClearTimer() {

clearInterval(tmrID);

}

function fly() {

tmrID = setInterval(moveAD, 20);

}

window.onload = function () {

var divFly = document.getElementById("divFly");

divFly.onmouseover = function () {

ClearTimer();

}

divFly.onmouseout = function () {

fly();

}

fly();

}

function closeAD() {

ClearTimer();

var divFly = document.getElementById("divFly");

divFly.style.display = "none";

}

</script>

</head>

<body>

<div id="divMain"></div>

<div id="divFly" style="position:absolute;top:0;left:0;border:1px solid green;">

<img src="../images/fly.gif" height="60px" width="60px" />

<p><a href="javascript:void(0)" onclick="closeAD()">关闭</a></p>

</div>

</body>

</html>