可移动的图层
2016-06-29来源:

1、将以下代码加入到heml的<head></head>之间:

<style type=text/css>

#floater {

position: absolute;

left: 500;

top: 146;

width: 125;

visibility: visible;

z-index: 10;

}</style>

====2、将以下代码加入到heml的<body></body>之间

<div id=floater style=left: 590px; top: 158px>

<p align=center><img src=想要显示的图片.gif alt=图片显示的文字 width=125 height=60><br>

<font color=#ff8040>图片下面的文字</font></p>

</div><script language=javascript>

self.onerror=null;

currentx = currenty = 0;

whichit = null;

lastscrollx = 0; lastscrolly = 0;

ns = (document.layers) ? 1 : 0;

ie = (document.all) ? 1: 0;

<!-- stalker code -->

function heartbeat() {

if(ie) { diffy = document.body.scrolltop; diffx = document.body.scrollleft; }

if(ns) { diffy = self.pageyoffset; diffx = self.pagexoffset; }

if(diffy != lastscrolly) {

percent = .1 * (diffy - lastscrolly);

if(percent > 0) percent = math.ceil(percent);

else percent = math.floor(percent);

if(ie) document.all.floater.style.pixeltop += percent;

if(ns) document.floater.top += percent;

lastscrolly = lastscrolly + percent;

}

if(diffx != lastscrollx) {

percent = .1 * (diffx - lastscrollx);

if(percent > 0) percent = math.ceil(percent);

else percent = math.floor(percent);

if(ie) document.all.floater.style.pixelleft += percent;

if(ns) document.floater.left += percent;

lastscrollx = lastscrollx + percent;

}

}

<!-- /stalker code -->

<!-- drag drop code -->

function checkfocus(x,y) {

stalkerx = document.floater.pagex;

stalkery = document.floater.pagey;

stalkerwidth = document.floater.clip.width;

stalkerheight = document.floater.clip.height;

if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;

else return false;

}

function grabit(e) {

if(ie) {

whichit = event.srcelement;

while (whichit.id.indexof(floater) == -1) {

whichit = whichit.parentelement;

if (whichit == null) { return true; }

}

whichit.style.pixelleft = whichit.offsetleft;

whichit.style.pixeltop = whichit.offsettop;

currentx = (event.clientx + document.body.scrollleft);

currenty = (event.clienty + document.body.scrolltop);

} else {

window.captureevents(event.mousemove);

if(checkfocus (e.pagex,e.pagey)) {

whichit = document.floater;

stalkertouchedx = e.pagex-document.floater.pagex;

stalkertouchedy = e.pagey-document.floater.pagey;

}

}

return true;

}

function moveit(e) {

if (whichit == null) { return false; }

if(ie) {

newx = (event.clientx + document.body.scrollleft);

newy = (event.clienty + document.body.scrolltop);

distancex = (newx - currentx); distancey = (newy - currenty);

currentx = newx; currenty = newy;

whichit.style.pixelleft += distancex;

whichit.style.pixeltop += distancey;

if(whichit.style.pixeltop < document.body.scrolltop) whichit.style.pixeltop = document.body.scrolltop;

if(whichit.style.pixelleft < document.body.scrollleft) whichit.style.pixelleft = document.body.scrollleft;

if(whichit.style.pixelleft > document.body.offsetwidth - document.body.scrollleft - whichit.style.pixelwidth - 20) whichit.style.pixelleft = document.body.offsetwidth - whichit.style.pixelwidth - 20;

if(whichit.style.pixeltop > document.body.offsetheight + document.body.scrolltop - whichit.style.pixelheight - 5) whichit.style.pixeltop = document.body.offsetheight + document.body.scrolltop - whichit.style.pixelheight - 5;

event.returnvalue = false;

} else {

whichit.moveto(e.pagex-stalkertouchedx,e.pagey-stalkertouchedy);

if(whichit.left < 0+self.pagexoffset) whichit.left = 0+self.pagexoffset;

if(whichit.top < 0+self.pageyoffset) whichit.top = 0+self.pageyoffset;

if( (whichit.left + whichit.clip.width) >= (window.innerwidth+self.pagexoffset-17)) whichit.left = ((window.innerwidth+self.pagexoffset)-whichit.clip.width)-17;

if( (whichit.top + whichit.clip.height) >= (window.innerheight+self.pageyoffset-17)) whichit.top = ((window.innerheight+self.pageyoffset)-whichit.clip.height)-17;

return false;

}

return false;

}

function dropit() {

whichit = null;

if(ns) window.releaseevents (event.mousemove);

return true;

}

<!-- drag drop code -->

if(ns) {

window.captureevents(event.mouseup|event.mousedown);

window.onmousedown = grabit;

window.onmousemove = moveit;

window.onmouseup = dropit;

}

if(ie) {

document.onmousedown = grabit;

document.onmousemove = moveit;

document.onmouseup = dropit;

}

if(ns || ie) action = window.setinterval(heartbeat(),1);

</script>

推荐信息
Baidu
map