图片移动不超出边界 博客分类： javascript CC++C#HTML
程序员文章站
2024-03-16 09:48:28
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>图片移动</TITLE>
<META http-equiv=keywords content=keyword1,keyword2,keyword3>
<META http-equiv=description content="this is my page">
<META http-equiv=content-type content="text/html; charset=UTF-8">
<SCRIPT language=javascript type=text/javascript>
var mouseObj=null;
var pX;
var pY;
document.onmousemove=divMove;
document.onmouseup=divUp;
function m(c_Obj){
mouseObj=document.getElementById(c_Obj);
// mouseObj.style.position="absolute";
pX=mouseObj.style.pixelLeft-event.x;
pY=mouseObj.style.pixelTop-event.y;
}
function divMove(){
if(mouseObj){
mouseObj.style.cursor="move";
mouseObj.style.left=pX+event.x;
mouseObj.style.top=pY+event.y;
event.returnValue=false;
}
}
function divUp() {
if(mouseObj){
mouseObj.style.cursor="hand";
mouseObj=null;
}
}
</SCRIPT>
<STYLE>.div {
BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; OVERFLOW-Y: hidden; BACKGROUND: lightblue; OVERFLOW-X: hidden; PADDING-BOTTOM: 0px; BORDER-LEFT: #000 1px solid; WIDTH: 600px; BORDER-BOTTOM: #000 1px solid; HEIGHT: 800px
}
</STYLE>
</HEAD>
<BODY>
<DIV class=div id=imgDiv><IMG onmousedown="m('layer');" id=layer
style="POSITION: absolute;background:red;" src="11.jpg">
</DIV></BODY></HTML>