<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>所用图在图片库中查找
标签:whichIt,return,htm,程序,objA,Slider,offsetLeft,var,document
From: https://blog.51cto.com/u_8215601/7507405