图片移动不超出边界

最新推荐文章于 2021-06-03 17:07:42 发布

weiweichen

最新推荐文章于 2021-06-03 17:07:42 发布

阅读量471

点赞数

分类专栏： javascript 文章标签： C C++ C# HTML

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[code]<!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.οnmοusemοve=divMove;
document.οnmοuseup=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 οnmοusedοwn="m('layer');" id=layer
style="POSITION: absolute;background:red;" src="11.jpg">
</DIV></BODY></HTML>
[/code]