leepoor

啥都没有|不要乱看

div 模拟滚动条(zz)

No Comments | 幽灵世界 | by leepoor | 486 Views. | 2007年11月22日,22:48:30

 

zz from http://bbs.51js.com/viewthread.php?tid=40905

 

 

<div class="codeText">
XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4. <title> Div Scroll Bar </title>  
  5. <meta name="Generator" content="EditPlus">  
  6. <meta name="Author" content="Xiaosa">  
  7.   
  8. <script language="JavaScript">  
  9. <!--   
  10.   
  11. //----------------------------------------   
  12. // Name:        Div Scroll Bar   
  13. // Author:      Xiaosa   
  14. // Contact:     goldenlove518@msn.com   
  15. //----------------------------------------   
  16.   
  17. var mouseInit = slideInit = 0;   
  18. var slider, xscroll, nContent,box;   
  19. var xH,xT,nSH,nOH;   
  20.   
  21. function init(){   
  22.     box = document.getElementById("box");   
  23.     slider = document.getElementById("slider");   
  24.   xscroll = document.getElementById("xscroll");   
  25.   nContent = document.getElementById("nContent");   
  26.      
  27.   slider.style.left = xscroll.offsetLeft - xscroll.offsetWidth/2-1;   
  28.   slider.style.top = xscroll.offsetTop;   
  29.   slider.style.visibility = "visible";   
  30.      
  31.   xH = xscroll.offsetTop + xscroll.offsetHeight - slider.offsetHeight;   
  32.   xT = xscroll.offsetTop;   
  33.   nSH = nContent.scrollHeight;   
  34.   nOH = nContent.offsetHeight;   
  35.     if(nSH <= nContent.clientHeight){   
  36.     xscroll.style.visibility = "hidden";   
  37.     slider.style.visibility = "hidden";   
  38.   }   
  39. }   
  40.   
  41. function xs_scroll(){   
  42.     // Call Init function   
  43.   init();   
  44.   
  45.   slider.onmousedown =function(){   
  46.     slider.setCapture();   
  47.     mouseInit = event.clientY;   
  48.     slideInit = parseInt(slider.style.marginTop);   
  49.     slider.onmousemove= setPos;   
  50.   }   
  51.   
  52.   slider.onmouseup = document.onmouseup = function(){   
  53.     slider.onmousemove = "";   
  54.     slider.releaseCapture();   
  55.   }   
  56.      
  57.   boxbox.ondragstart = box.onselectstart = function(){   
  58.     event.returnValue =false;   
  59.     return false;   
  60.   }   
  61. }   
  62.     //Set slider Position   
  63. function setPos(){   
  64.   var m = slideInit + (event.clientY - mouseInit);   
  65.   if (m < 0) m = 0;   
  66.   if (m > xscroll.clientHeight-slider.offsetHeight) m = xscroll.offsetHeight-slider.offsetHeight;   
  67.   
  68.   slider.style.marginTop = m + "px";   
  69.   nContent.scrollTop = (nSH-nOH)*parseInt(m)/(xscroll.clientHeight-slider.clientHeight);   
  70. }   
  71. //-->  
  72. </script>  
  73. <style>  
  74.   
  75.   
  76.   #box {   
  77.      background:#fefefe;   
  78.      position:relative;   
  79.    width:185px;   
  80.    height:220px;   
  81.   }   
  82.   #xscroll {   
  83.      position:relative;   
  84.    float:right;   
  85.    left:auto;   
  86.    top:auto;   
  87.    height:100%;   
  88.    width:1px;   
  89.    background:red;   
  90.   }   
  91.   #slider {   
  92.      position:absolute;   
  93.    left:0px;   
  94.    top:0px;   
  95.    z-index:1;   
  96.    width:5px;   
  97.    height:23px;   
  98.      visibility:hidden;   
  99.    background:darkred;   
  100.   }   
  101.   #nContent {   
  102.    color:#6A2A04;   
  103.      position:relative;   
  104.    width:180px;   
  105.    height:220px;   
  106.    overflow:hidden;   
  107.    background:#FF9933;   
  108.    font-size:9pt;   
  109.    font-family:arial;   
  110.   }   
  111.      
  112.   
  113. </style>  
  114. </head>  
  115.   
  116. <body onload=" xs_scroll();">  
  117.   
  118.           <div id="box">  
  119.          <div id="xscroll"></div>  
  120.          <div id="slider" style="margin-top:0px;"> </div>  
  121.          <div id="nContent">  
  122.           <span style="font-weight:bold">  
  123.           We produce strategic events for a    
  124.           wide cross-section of industries   
  125.           with a particular emphasis on the    
  126.           following :</span><br /><br />  
  127.           * Telecommunications & IT  <br />  
  128.           * Real Estate and Property Management   
  129.           * Financial Services<br />     
  130.           * Construction<br />  
  131.           * FMCG<br />  
  132.           * Aviation<br />  
  133.           * Pharmaceutical & Healthcare<br />  
  134.           * Oil & Gas, Power<br />  
  135.           * Auto  <br />  
  136.           * Travel & Tourism<br />  
  137.           * Retail <br />  
  138.           * Advertising & Marketing<br />  
  139.           <br />  
  140.           <span style="font-weight:bold">All the products cover almost every job function of any organization :</span>  
  141.           <br /><br />  
  142.           * Marketing & Sales  <br />  
  143.           * Research & Development <br />  
  144.           * Finance & Tax  <br />  
  145.           * Manufacturing & Operations <br />  
  146.           * Legal Counsel  <br />  
  147.           * Customer Services <br />  
  148.           * Human Resources <br />  
  149.           * Logistic & Supply Chain <br />  
  150.           * Public Relations <br />  
  151.           * IT <br />  
  152.           * Business Development & Strategic Planning   
  153.           </div>  
  154.         </div>  
  155. </body>  
  156. </html>  

Tags: div , 滚动条

上一篇: 这个周末的打算
下一篇: 多级滑动菜单

发表评论 点击获得Trackback地址