转载滚动条移动弹出框

博客分类：

转载滚动条移动弹出框

 <html>  
 <head>  
   <title>div</title>  
 <style type=text/css>  
 #topbar{  
   position:absolute;  
   border-right: #455690 3px solid;  
   border-top: #455690 3px solid;  
   border-left: #455690 3px solid;  
   border-bottom: #455690 3px solid;  
   background-color:#BBDDE5;  
   width: 200px;
   visibility: hidden;  
   z-index: 99999;  
   filter: progid:DXImageTransform.Microsoft.BasicImage(opacity=.95);  
   opacity: 0.95;
 }  
 </style>  
 </head>  
   
 <body>
  <div id="topbar">  
   <div align="right"><a href="javascript:closebar();"><img src="/images/close.gif" border="0" /></a></div>  
   <table width="100%" border="0">  
     <caption><strong> 购货人信息 </strong></caption>  
     <tr>  
       <td>姓名</td>  
       <td>1222 </td>  
     </tr>  
      <tr>  
       <td>电子邮件</td>  
       <td><a href="mailto:138@163.com">138@163.com</a> </td>  
      </tr>  
       <tr>  
       <td>手机</td>  
       <td>1213345</td>  
      </tr>  
     <tr>  
       <td>账户余额</td>  
       <td>33333元</td>  
     </tr>  
     <tr>  
       <td>积分数</td>  
       <td>54</td>  
     </tr>  
     <tr>  
       <td>会员等级</td>  
       <td>vip</td>  
     </tr>  
   </table>  
   </div>  
     
   [ <a href="javascript:staticbar();">显示购货人信息</a> ]  
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <p>测试</p>
 </body>  
 </html>  
 <script>  
 var persistclose = 0; 
 var startX       = 3;
 var startY       = 3;
   
 function iecompattest()  
 {  
   return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body  
 }  
   
 function get_cookie(Name)  
 {  
   var search = Name + "="  
   var returnvalue = "";  
   
   if (document.cookie.length > 0)  
   {  
     offset = document.cookie.indexOf(search)  
     if (offset != - 1)  
     {  
       offset += search.length;  
       end = document.cookie.indexOf(";", offset);  
       if (end == - 1)  
       {  
         end = document.cookie.length;  
       }  
       returnvalue = unescape(document.cookie.substring(offset, end));  
     }  
   }  
   return returnvalue;  
 }  
   
 var verticalpos = "fromtop";  
   
 function closebar()  
 {  
   if (persistclose)  
   {  
     document.cookie = "remainclosed=1";  
   }  
   document.getElementById("topbar").style.visibility = "hidden";  
 }  
   
 function staticbar()  
 {  
   var ns = (navigator.appName.indexOf("Netscape") != - 1);  
   var d = document;  
   
   function ml(id)  
   {  
     var el = d.getElementById(id);  
   
     if ( ! persistclose || persistclose && get_cookie("remainclosed") == "")  
     {  
       el.style.visibility = "visible";  
     }  
     if (d.layers)  
     {  
       elel.style = el;  
     }  
     el.sP = function(x, y)  
     {  
       this.style.left = x + "px";  
       this.style.top = y + "px";  
     }  
     ;  
     el.x = startX;  
     if (verticalpos == "fromtop")  
     {  
       el.y = startY;  
     }  
     else  
     {  
       el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;  
       el.y -= startY;  
     }  
     return el;  
   }  
   
   window.stayTopLeft = function()  
   {  
     if (verticalpos == "fromtop")  
     {  
       var pY = ns ? pageYOffset : iecompattest().scrollTop;  
       ftlObj.y += (pY + startY - ftlObj.y) / 8;  
     }  
     else  
     {  
       var pY = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;  
       ftlObj.y += (pY - startY - ftlObj.y) / 8;  
     }  
     ftlObj.sP(ftlObj.x, ftlObj.y);  
     setTimeout("stayTopLeft()", 10);
   }  
   ftlObj = ml("topbar");  
   stayTopLeft();  
 }  
 </script>

分享到：