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>