先看效果图：

window.onload=function ()

{

var oDiv=document.getElementById('div1');

var oDiv2=document.getElementById('div2');

var oDiv3=document.getElementById('div3');

var oParent=document.getElementById('parent');

 

var disX=0;

 

oDiv.onmousedown=function (ev)

{

var oEvent=ev||event;

 

disX=oEvent.clientX-oDiv.offsetLeft;

 

document.onmousemove=function (ev)

{

var oEvent=ev||event;

var l=oEvent.clientX-disX;

 

if(l<0)

{

l=0;

}

else if(l>oParent.offsetWidth-oDiv.offsetWidth)

{

l=oParent.offsetWidth-oDiv.offsetWidth;

}

 

oDiv.style.left=l+'px';

 

var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);

document.title=scale;

 

oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';

};

 

document.onmouseup=function ()

{

document.onmousemove=null;

document.onmouseup=null;

};

 

return false; //chrome、ff、IE9

};

};