Rumah > hujung hadapan web > tutorial js > Contoh tetingkap timbul di sudut kanan bawah yang dilaksanakan oleh kemahiran javascript_javascript

Contoh tetingkap timbul di sudut kanan bawah yang dilaksanakan oleh kemahiran javascript_javascript

WBOY
Lepaskan: 2016-05-16 16:02:34
asal
1058 orang telah melayarinya

Contoh dalam artikel ini menerangkan kaedah tetingkap timbul di penjuru kanan sebelah bawah yang dilaksanakan oleh javascript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

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

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

<!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=gb2312" />

<title>右下角的弹窗</title>

<style type="text/css">

body { background:#333333;}

#winpop {

width:200px; height:0px;

position:absolute; right:0; bottom:0;

border:1px solid #999999; margin:0; padding:1px;

overflow:hidden; display:none; background:#FFFFFF

}

#winpop .title {

width:100%; height:20px;

line-height:20px; background:#FFCC00;

font-weight:bold; text-align:center;

font-size:12px;

}

#winpop .con {

width:100%; height:80px;

line-height:80px; font-weight:bold;

font-size:12px; color:#FF0000;

text-decoration:underline; text-align:center

}

#silu {

font-size:13px; color:#999999;

position:absolute; right:0;

text-align:right; text-decoration:underline;

line-height:22px;

}

.close {

position:absolute; right:4px; top:-1px;

color:#FFFFFF; cursor:pointer

}

</style>

<script type="text/javascript">

function tips_pop(){

var MsgPop=document.getElementById("winpop");

var popH=parseInt(MsgPop.style.height);

if (popH==0){

MsgPop.style.display="block";

show=setInterval("changeH('up')",2);

}

else {

hide=setInterval("changeH('down')",2);

}

}

function changeH(str) {

var MsgPop=document.getElementById("winpop");

var popH=parseInt(MsgPop.style.height);

if(str=="up"){

if (popH<=100){

MsgPop.style.height=(popH+4).toString()+"px";

}

else{

clearInterval(show);

}

}

if(str=="down"){

if (popH>=4){

MsgPop.style.height=(popH-4).toString()+"px";

}

else{

clearInterval(hide);

MsgPop.style.display="none";

}

}

}

window.onload=function(){

document.getElementById('winpop').style.height='0px';

setTimeout("tips_pop()",800);

}

</script>

</head>

<body>

内容展示内容展示内容展示内容展示内容展示

内容展示内容展示内容展示内容展示内容展示

内容展示内容展示内容展示内容展示内容展示

<hr>

<div id="silu">

<button onclick="tips_pop()">测试按钮</button>

</div>

<div id="winpop">

<div class="title">您有新的消息

<span class="close" onclick="tips_pop()">X</span></div>

<div class="con">未读信息(1)</div>

</div>

<div>http://www.jb51.net/</div>

</body>

</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan