今天看啥
热点:

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


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

  ?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

<!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>

  希望本文所述对大家的javascript程序设计有所帮助。

www.bkjia.comtruehttp://www.bkjia.com/Javascript/1005891.htmlTechArticleJavascript实现飞动广告效果的方法 本文实例讲述了Javascript实现飞动广告效果的方法。分享给大家供大家参考。具体实现方法如下: ? 1 2 3...

相关文章

    暂无相关文章
相关搜索:

帮客评论

视觉看点