1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <style type="text/css">
7 body {
8 height: 1000px;
9 }
10
11 #msgQQ {
12 border: 1px solid #000;
13 width: 300px;
14 height: 200px;
15 position: fixed; /**fixed是针对窗体布局，拉滚动条不会改变位置*/
16 right: 0px; /*坐标原点在右下角*/
17 bottom: 0px;
18 background-color: #0094ff;
19 }
20 </style>
21 <script src="Scripts/jquery-1.8.2.min.js"></script>
22 <script type="text/javascript">
23 $(function () {
24 $("#msgQQ").hide();
25 $("#showMsg").click(function () {
26 $("#msgQQ").slideDown(2000, close);;
27 });
28 });
29 function close() {
30 //可以写字符串也可以写函数
31 // setTimeout('$("#msgQQ").slideUp();',2000);
32 setTimeout(function () { $("#msgQQ").slideUp(); }, 2000);
33 }
34 </script>
35 </head>
36 <body>
37 <img src="Images/orderedList8.png" />
38 <input type="button" value="显示消息" id="showMsg" />
39 <div id="msgQQ"></div>
40 </body>
41 </html>
