欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片移动不超出边界 博客分类: 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>
  • mix.rar (7.3 KB)
  • 下载次数: 12
相关标签: C C++ C# HTML

上一篇: Gson简单使用

下一篇: