將圖片定義壹個絕對的層定位。比如寫在壹個絕對關系的層上也可以。
在IE和NS下用window.event進行事件收集，收集到鼠標按下事件，並在事件中判斷中否該位置在圖片上。如果不是，則不進行任何處理。如果是記錄下當前鼠標位置。
設置鼠標移動事件。用圖層的位置跟參鼠標移動。也就是說鼠標移動到哪，層跟隨到哪兒。
設置鼠標放下事件，取得當前的鼠標位置後，將層設置到該位置就可以了！這個層的位置不是等於鼠標的位置。而是相對於鼠標的位置，也就是其運動路徑才與鼠標按下時運動相同。
三個事件的源碼如下：
function checkFocus(x,y){
stalkerX = document.P_02.pageX;
stalkerY = document.P_02.pageY;
stalkerWidth = document.P_02.clip.width;
stalkerHeight = docuemnt.P_02.clip.height;
if((x > stalkerX && x < (stalkerX+stalkerWidth)) && (y > stalkerY && y < (stalkerY+stalkerHeight))) return true;
else return false;
}//該函數是為NS檢查焦點用的!
function grabIt(e){
if(NS) {//NS瀏覽器
window.captureEvents(Event.MOUSEMOVE);//捕獲事件源;
if(checkFocus(e.pageX,e.pageY)){
whichIt = document.P_02;
StalkerTouchedX = e.pageX-document.P_02.pageX;
StalkerTouchedY = e.pageY-document.P_02.pageY;
}
}
else{//如果是IE瀏覽器
whichIt = event.srcElement;
while(whichIt.id.indexOf("P_02")== -1){
whichIt = whichIt.parentElement;
if(whichIt == null) return true;
}//遍歷事件源節點的父節點,查找定位事件源為P_02;也就是說只要是P_02內的所有元素都可引起
whichIt.parentElement.style.pixelTop = whichIt.parentElement.offsetTop;
whichIt.parentElement.style.pixelLeft = whichIt.parentElement.offsetLeft;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
return true;
}//該函數用以記錄按下MOUSE時的位置!
function moveIt(e) {
if (whichIt == null) { return false; }
if(NS) {
whichIt.parentElement.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.parentElement.left < 0+self.pageXOffset) whichIt.parentElement.left = 0+self.pageXOffset;
if(whichIt.parentElement.top < 0+self.pageYOffset) whichIt.parentElement.top = 0+self.pageYOffset;
if( (whichIt.parentElement.left + whichIt.parentElement.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.parentElement.left = ((window.innerWidth+self.pageXOffset)-whichIt.parentElement.clip.width)-17;
if( (whichIt.parentElement.top + whichIt.parentElement.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.parentElement.top = ((window.innerHeight+self.pageYOffset)-whichIt.parentElement.clip.height)-17;
return false;
}
else {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.parentElement.style.pixelLeft += distanceX;
whichIt.parentElement.style.pixelTop += distanceY;
if(whichIt.parentElement.style.pixelTop < document.body.scrollTop) whichIt.parentElement.style.pixelTop = document.body.scrollTop;
if(whichIt.parentElement.style.pixelLeft < document.body.scrollLeft) whichIt.parentElement.style.pixelLeft = document.body.scrollLeft;
if(whichIt.parentElement.style.pixelLeft > (document.body.offsetWidth - document.body.scrollLeft - whichIt.parentElement.style.pixelWidth - 20)) whichIt.parentElement.style.pixelLeft = document.body.offsetWidth - whichIt.parentElement.style.pixelWidth - 20;
if(whichIt.parentElement.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.parentElement.style.pixelHeight - 5) whichIt.parentElement.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.parentElement.style.pixelHeight - 5;
event.returnValue = false;
}
return false;
}//記錄鼠標移動軌跡
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}//釋放鼠標的方法
當然，這幾個事件的加入方法如下：
註：NS為測試出的瀏覽類型。NS=document.layer?1:0，先對瀏覽器進行了測試。
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
else {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
else中為IE的加入方法。這樣妳可以試壹下！這個程序我自己寫後經過IE5+，和NS的測試的。如果有什麽不對的地方可以反饋給我！ p_02是拖動圖片層，而p_02的父層就是圖片的父層，運動是依靠的父圖層，焦點計算的是P_02層。這樣，如果父層中有其他元素時也可以跟前運動。我作的是壹個視窗運動效果，P_02層相當於標題欄的，而其父層中還有其他的內容。這樣的效果就相當於妳拖動標題欄時整個視窗在運動。如果妳是不壹個圖片，可以考慮不使用父層，自己修改壹下，會更個性的！