js實現拖拽和放大圖片

時間 2019-11-11

原文原文鏈接

如今主流的大型網站在帳戶設置模塊都會有上傳頭像的功能，作的比較好的都會有上傳頭像後對這個圖片作編輯的功能，好比拖拽圖片顯示範圍，或者放大圖片。像QQ的頭像設置、淘寶等商場的上傳圖片設置。 javascript

如今本人參與的項目也須要實現這個功能，花了兩天時間在頁面實現了圖片拖拽和方法功能，如今分享下代碼，求拍磚。 css

----注：直接把代碼拷進一個空白的html文件就能夠看到效果了，記得修改圖片路徑就能夠了。 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;
                return false;
            }
        }
        document.onmousedown = initDrag;
        document.onmouseup = new Function("isdrag=false");

     </script>

</head>
<body>
    <div id="picDiv" >
		<img id="pic"  class="dragAble" alt="頭像" src="2.jpg" />
        <br />
    </div>

	 <input id="btn1" type="button" value="放大" onclick="ImageChange(true)" />
     <input id="btn2" type="button" value="縮小" onclick="ImageChange(false)" />
	<!--  <input id="btn3" type="button" value="div的座標" onclick="getDivPosition()" />  -->
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

js實現拖拽和放大 圖片

js實現拖拽和放大圖片