<html>
<head>
<STYLE type=text/css>#floater {
 Z-INDEX: 10;VISIBILITY: visible;  POSITION: absolute;
}
</STYLE>
<title>htm Slider--塞北的雪</title><body leftmargin="10">
htm Slider：
<br><br><br><br><br><br><br><br>
<table width=500><tr><td align=center><img src="gd.gif" id="gd1" border="0"></td></tr></table>
<img id="floater" src="slider.gif" border="0"><SCRIPT language=JavaScript>
    var minValue=1;
    var maxValue=100;
    var objParent=gd1.parentElement;
    function getLeft(objA)
    { 
       if(!objA) return 0;
       if(objA.tagName!='BODY')
         return(objA.offsetLeft+getLeft(objA.parentElement));
           else
              return document.body.offsetLeft;
    }
    
    function getTop(objA)
    { 
       if(!objA) return 0;
       if(objA.tagName!='BODY')
         return(objA.offsetTop + getTop(objA.parentElement));
           else
              return document.body.offsetTop;
    }
    var gdLeft=gd1.offsetLeft + getLeft(objParent) ;
    var gdTop=gd1.offsetTop + getTop(objParent);
    var gdWidth=gd1.clientWidth;
    var minLeft=gdLeft
    var maxLeft=gdLeft -floater.width/2 + gdWidth
    floater.style.pixelLeft=minLeft-10 ;
    floater.style.pixelTop=gdTop - 4;
 currentX  = minLeft;  
 whichIt = null;           
 function grabIt(e) {
  whichIt = event.srcElement;
  whichIt.style.pixelLeft = whichIt.offsetLeft;
  currentX = event.clientX + document.body.scrollLeft;
 }
 function moveIt(e) {
  if (whichIt == null) { return false; }
  newX = event.clientX + document.body.scrollLeft;
  if(newX<minLeft)newX=minLeft;if(newX>maxLeft)newX=maxLeft;
  if(newX>=(minLeft) && newX<=maxLeft)
  {
  distanceX = (newX - currentX);
  currentX = newX; 
  whichIt.style.pixelLeft += distanceX;
  }
  window.status=getValue(newX);
  event.returnValue = false;
 } function dropIt()
    {  
        whichIt = null;
 }    function getValue(cLeft)
    {
      return Math.floor((maxValue-minValue) * (cLeft-minLeft)/(maxLeft-minLeft)) + minValue ;
    }
    
 document.onmousedown = grabIt;
 document.onmousemove = moveIt;
 document.onmouseup = dropIt;
</SCRIPT></body>
</html>所用图在图片库中查找