forked from web240/web240.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
show.html
107 lines (104 loc) · 4.39 KB
/
show.html
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html doctype="html">
<head>
<style>
#msg {
display:none;
border:2px solid #ff0;
width:500px;
height:200px;
position:relative;
right:5px;
bottom:5px;
}
</style>
</head>
<body>
<div style="height:1000px;width:1000px;">
<div style="height:500px"></div><div>
<input type="button" id="tl" value="左上" />
<input type="button" id="tc" value="上中" />
<input type="button" id="tr" value="右上" />
<input type="button" id="cl" value="中左" />
<input type="button" id="cc" value="中中" />
<input type="button" id="cr" value="中右" />
<input type="button" id="bl" value="下左" />
<input type="button" id="bc" value="下中" />
<input type="button" id="br" value="下右" />
</div>
</div>
<div id="msg">
<h2>title</h2>
<div>content</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script>
<script>
$(function () {
$("#msg").fadeIn(2000);
})
</script>
<script>
var delaytime = 5000;
function show(obj) {
console.log(document.body.scrollTop);
console.log(document.body.offsetHeight);
console.log(document.body.clientHeight);
console.log(document.body.scrollLeft);
console.log(document.body.offsetWidth);
console.log(document.body.clientWidth);
$("#msg").css(obj);
$("#msg").fadeIn(2000);
}
$(function () { })
$("#tl").on("click", function () {
var postion = { left: document.body.scrollLeft + 'px', top: -(document.body.offsetHeight - document.body.scrollTop-200) + 'px' };
show(postion);
autoClose();
});
$("#tc").on("click", function () {
var postion = { left: (document.body.clientWidth - 500) / 2 + document.body.scrollLeft + "px", top: -(document.body.offsetHeight - document.body.scrollTop-200) + 'px' };
show(postion);
autoClose();
});
$("#tr").on("click", function () {
var postion = { left: (document.body.clientWidth - 500 + document.body.scrollLeft) + 'px', top: -(document.body.offsetHeight - document.body.scrollTop-200) + 'px' };
show(postion);
autoClose();
});
$("#cl").on("click", function () {
var postion = { left: document.body.scrollLeft + 'px', top: -(document.body.offsetHeight - document.body.scrollTop - document.body.clientHeight / 2 -100) + 'px' };
show(postion);
autoClose();
});
$("#cc").on("click", function () {
var postion = { left: (document.body.clientWidth - 500) / 2 + document.body.scrollLeft + "px", top: -(document.body.offsetHeight - document.body.scrollTop - document.body.clientHeight / 2 - 100) + 'px' };
show(postion);
autoClose();
});
$("#cr").on("click", function () {
var postion = { left: (document.body.clientWidth - 500 + document.body.scrollLeft) + 'px', top: -(document.body.offsetHeight - document.body.scrollTop - document.body.clientHeight / 2 - 100)+'px' };
show(postion);
autoClose();
});
$("#bl").on("click", function () {
var postion = { left: document.body.scrollLeft+'px', top: -(document.body.offsetHeight - document.body.scrollTop - document.body.clientHeight) + 'px' };
show(postion);
autoClose();
});
$("#bc").on("click", function () {
var postion = {
left: (document.body.clientWidth - 500) / 2 + document.body.scrollLeft +"px", top: -(document.body.offsetHeight - document.body.scrollTop - document.body.clientHeight) + 'px'
};
show(postion);
autoClose();
});
$("#br").on("click", function () {
var postion = { left: (document.body.clientWidth - 500 + document.body.scrollLeft) + 'px', top: -(document.body.offsetHeight - document.body.scrollTop - document.body.clientHeight) + 'px' };
show(postion);
autoClose();
});
function autoClose() {
//setTimeout(function () { $("#msg").fadeOut(2000); }, delaytime);
}
</script>
</body>
</html>