js实现网页飘窗 

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <title>Jerory's code</title>
 5 </head>
 6 <body>
 7 <div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;   border:1px solid #000; width:200px; height:100px;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="right">
 8 <img style="width:100%;height:100%; cursor:pointer" src="http://www.baidu.com/img/bdlogo.png" onclick="javascript:window.open('http://www.baidu.com');"  onload="return imgzoom(this,550)"/>
 9 <div style="cursor:pointer;color:#000;  margin:3 0 3 0; font-size:12px; width:100%;  text-align:center;" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭</div>
10 
11 </div>
12 <script language=javascript>
13 var xPos = 20;
14 var yPos = document.body.clientHeight;
15 var step = 1;
16 var delay = 30;                     
17 var height = 0;                     
18 var Hoffset = 0;                    
19 var Woffset = 0;                     
20 var yon = 0;                    
21 var xon = 0;                     
22 var pause = true;                    
23 var interval;                    
24 img.style.top = yPos;                    
25 function changePos() {                   
26 width = document.body.clientWidth;                    
27 height = document.body.clientHeight;                    
28 Hoffset = img.offsetHeight;                    
29 Woffset = img.offsetWidth;                   
30 img.style.left = xPos + document.body.scrollLeft;                    
31 img.style.top = yPos + document.body.scrollTop;                    
32 if (yon) {                  
33 yPos = yPos + step;                    
34 }               
35 else {             
36 yPos = yPos - step;                    
37 }            
38 if (yPos < 0) {                  
39 yon = 1;                    
40 yPos = 0;                    
41 }                  
42 if (yPos >= (height - Hoffset)) {                    
43 yon = 0;                    
44 yPos = (height - Hoffset);                     
45 }                  
46 if (xon) {                    
47 xPos = xPos + step;                    
48 }                 
49 else {                 
50 xPos = xPos - step;                   
51 }                  
52 if (xPos < 0) {                    
53 xon = 1;                   
54 xPos = 0;                   
55 }         
56 if (xPos >= (width - Woffset)) {                    
57 xon = 0;           
58 xPos = (width - Woffset);                    
59 }                    
60 }
61 function start() {                    
62 img.style.visibility = "visible";                  
63 interval = setInterval('changePos()', delay);                    
64 }              
65 start();  
66 </script>
67 </body>
68 </html>

 

posted @ 2015-03-12 16:14  Jerory  阅读(2923)  评论(0)    收藏  举报