预览弹出窗口

CSS文件

 1 #previewWin {
 2     background-color: #FF9;
 3     width: 400px;
 4     height: 100px;
 5     font: .8em arial, helvetica, sans-serif;
 6     padding: 5px;
 7     position: absolute;
 8     visibility: hidden;
 9     top: 10px;
10     left: 10px;
11     border: 1px #CC0 solid;
12     clip: auto;
13     overflow: hidden;
14 }
15 
16 #previewWin h1, #previewWin h2 {
17     font-size: 1.0em;
18 }
View Code

JS文件

 1 window.onload = initAll;
 2 var xhr = false;
 3 var xPos, yPos;
 4 
 5 function initAll() {
 6     var allLinks = document.getElementsByTagName("a");
 7 
 8     for (var i=0; i< allLinks.length; i++) {
 9         allLinks[i].onmouseover = showPreview;
10         allLinks[i].onmouseout = hidePreview;
11     }
12 }
13 
14 function showPreview(evt) {
15     getPreview(evt);
16     return false;
17 }
18 
19 function hidePreview() {
20     document.getElementById("previewWin").style.visibility = "hidden";
21 }
22 
23 function getPreview(evt) {
24     if (evt) {
25         var url = evt.target;
26     }
27     else {
28         evt = window.event;
29         var url = evt.srcElement;
30     }
31     xPos = evt.clientX;
32     yPos = evt.clientY;
33     
34     if (window.XMLHttpRequest) {
35         xhr = new XMLHttpRequest();
36     }
37     else {
38         if (window.ActiveXObject) {
39             try {
40                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
41             }
42             catch (e) { }
43         }
44     }
45 
46     if (xhr) {
47         xhr.onreadystatechange = showContents;
48         xhr.open("GET", url, true);
49         xhr.send(null);
50     }
51     else {
52         alert("Sorry, but I couldn't create an XMLHttpRequest");
53     }
54 }
55 
56 function showContents() {
57     var prevWin = document.getElementById("previewWin");
58     
59     if (xhr.readyState == 4) {
60         if (xhr.status == 200) {
61             prevWin.innerHTML = xhr.responseText;
62         }
63         else {
64             prevWin.innerHTML = "There was a problem with the request " + xhr.status;
65         }
66         prevWin.style.top = parseInt(yPos)+2 + "px";
67         prevWin.style.left = parseInt(xPos)+2 + "px";
68         prevWin.style.visibility = "visible";
69         prevWin.onmouseout = hidePreview;
70     }
71 }
View Code

HTML文件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 4     <title>Previewing Links</title>
 5     <link type="text/css" rel="stylesheet" href="script05.css" />
 6     <script type="text/javascript" src="script05.js"></script>
 7 </head>
 8 <body>
 9     <h2>A Gentle Introduction to JavaScript</h2>
10     <ul>
11         <li><a href="jsintro/2000-08.html">August column</a></li>
12         <li><a href="jsintro/2000-09.html">September column</a></li>
13         <li><a href="jsintro/2000-10.html">October column</a></li>
14         <li><a href="jsintro/2000-11.html">November column</a></li>
15     </ul>
16     <div id="previewWin"> </div>
17 </body>
18 </html>
View Code

 

posted @ 2015-04-02 11:26  壬子木  阅读(118)  评论(0)    收藏  举报