图片移动不超出边界 博客分类: javascript CC++C#HTML
程序员文章站
2024-03-16 09:40: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>
上一篇: Gson简单使用