js 跟随滚动的右侧浮动层
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 2 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <title>无标题文档</title> 7 <!--***********开始*************--> 8 9 <script type="text/javascript"> 10 //<![CDATA[ 11 var tips; var theTop = 200/*这是默认高度,越大越往下*/; var old = theTop; 12 function initFloatTips() { 13 tips = document.getElementById('floatTips'); 14 moveTips(); 15 }; 16 function moveTips() { 17 var tt = 50; 18 if (window.innerHeight) { 19 pos = window.pageYOffset 20 } 21 else if (document.documentElement && document.documentElement.scrollTop) { 22 pos = document.documentElement.scrollTop 23 } 24 else if (document.body) { 25 pos = document.body.scrollTop; 26 } 27 pos = pos - tips.offsetTop + theTop; 28 pos = tips.offsetTop + pos / 10; 29 if (pos < theTop) pos = theTop; 30 if (pos != old) { 31 tips.style.top = pos + "px"; 32 tt = 10; 33 } 34 old = pos; 35 setTimeout(moveTips, tt); 36 } 37 38 //!]]> 39 </script> 40 41 <style type="text/css"> 42 .floatTips 43 { 44 position: absolute; 45 border: solid 1px #777; 46 padding: 3px; 47 top: 250px; 48 right: 5px; 49 width: 30px; 50 height: 300px; 51 background: #cccccc; 52 color: white; 53 } 54 .showDiv 55 { 56 position: absolute; 57 border: solid 1px #777; 58 padding: 3px; 59 top: 250px; 60 right: 5px; 61 width: 300px; 62 height: 300px; 63 background: #cccccc; 64 color: white; 65 } 66 </style> 67 68 <script type="text/javascript"> 69 function FunOnmouseUp() { 70 var objFloatTips = $("floatTips"); 71 var objActivityContext = $("activityContext"); 72 objFloatTips.className = "showDiv"; 73 objActivityContext.style.display = ""; 74 } 75 function FunMouseOut() { 76 var objFloatTips = $("floatTips"); 77 var objActivityContext = $("activityContext"); 78 objFloatTips.className = "floatTips"; 79 objActivityContext.style.display = "none"; 80 } 81 82 function $(objID) { 83 return document.getElementById(objID); 84 } 85 </script> 86 87 </head> 88 <body onload="initFloatTips()"> 89 <div id="floatTips" onmouseover="FunOnmouseUp()" onmouseout="FunMouseOut()" class="floatTips"> 90 最新的活动 91 <div id="activityContext" style="display: none"> 92 显示最新的活动 93 </div> 94 </div> 95 <!--**********结束***************--> 96 <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#F7F7F7"> 97 <tr> 98 <td height="2101"> 99 </td> 100 </tr> 101 </table> 102 </body> 103 </html>