首页 > 代码库 > [转载] js实现拖拽和放大 图片

[转载] js实现拖拽和放大 图片

2024-08-11 14:23:14   218人阅读

现在主流的大型网站在 账户设置模块都会有上传头像的功能，做的比较好的都会有上传头像后对这个图片做编辑的功能，比如拖拽图片显示范围，或者放大图片。像QQ的头像设置、淘宝等商场的上传图片设置。

现在本人参与的项目也需要实现这个功能，花了两天时间在页面实现了图片拖拽和方法功能，现在分享下代码，求拍砖。


----注：直接把代码拷进一个空白的html文件就可以看到效果了，记得修改图片路径就可以了。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type" Content="text/html; charset=UTF-8"><head >    <title>图片缩放和固定div层拖动</title>    <style type="text/css">	  #picDiv		{		margin:8px 8px 4px 0;		border:1px solid #666666;		padding:0;	    width:120px;		height:120px;		float:left;		overflow:hidden;		position:relative;		cursor:move;		}	 .dragAble        {            position: absolute;            cursor: move;        }    </style>    <script language="javascript" type="text/javascript">        //图片放大和缩小（兼容IE和火狐，谷歌）        function ImageChange(args) {            var oImg = document.getElementById("pic");            if (args) {                oImg.width = oImg.width * 1.2;                oImg.height = oImg.height * 1.2;			   // oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + ‘%‘;            }            else {                oImg.width = oImg.width / 1.2;                oImg.height = oImg.height / 1.2;            }        }		//获取div的四个顶点坐标		   function getDivPosition()		   {		   var odiv=document.getElementById(‘picDiv‘);		 //  alert(odiv.getBoundingClientRect().left);		 // alert(odiv.getBoundingClientRect().top);		   		   		   var xLeft,xRigh,yTop,yBottom;		   return {				xLeft:odiv.getBoundingClientRect().left,				xRigh:odiv.getBoundingClientRect().left+130, 				yTop:odiv.getBoundingClientRect().top,				yBottom:odiv.getBoundingClientRect().top+130				};		   }		 //获取鼠标坐标		   function mousePos(e)		   {				var x,y;				var e = e||window.event;				return {				x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,				y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop				};			};		//在固定div层拖动图片		var ie = document.all;        var nn6 = document.getElementById && !document.all;        var isdrag = false;        var y, x;        var oDragObj;				//鼠标移动        function moveMouse(e) {				        //鼠标的坐标				mousePos(e).x   ;				mousePos(e).y  ;				//div的四个顶点坐标				getDivPosition().xLeft				getDivPosition().xRigh				getDivPosition().yTop				getDivPosition().yBottom							if(isdrag && mousePos(e).x > getDivPosition().xLeft &&  mousePos(e).x < getDivPosition().xRigh  &&  mousePos(e).y >getDivPosition().yTop && mousePos(e).y< getDivPosition().yBottom )			{                oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y) + "px";                oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x) + "px";                return false;            }        }		//鼠标按下才初始化        function initDrag(e) {            var oDragHandle = nn6 ? e.target : event.srcElement;            var topElement = "HTML";            while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {                oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;            }            if (oDragHandle.className == "dragAble") {                isdrag = true;                oDragObj = oDragHandle;                nTY = parseInt(oDragObj.style.top + 0);                y = nn6 ? e.clientY : event.clientY;                nTX = parseInt(oDragObj.style.left + 0);                x = nn6 ? e.clientX : event.clientX;                document.onmousemove = moveMouse;                returnfalse;            }        }        document.onmousedown = initDrag;        document.onmouseup = newFunction("isdrag=false");     </script></head><body>    <divid="picDiv" >		<imgid="pic"class="dragAble"alt="头像"src="2.jpg" />        <br />    </div>	 <inputid="btn1"type="button"value="放大"onclick="ImageChange(true)" />     <inputid="btn2"type="button"value="缩小"onclick="ImageChange(false)" />	<!--  <input id="btn3" type="button" value="http://www.mamicode.com/div的坐标" onclick="getDivPosition()" />  --></body></html>

 

© 著作权归作者所有
转自：http://my.oschina.net/u/1172409/blog/148618

[转载] js实现拖拽和放大 图片


联系
我们