學會如何獲取鼠標的坐標位置以及監聽鼠標的按下、拖動、松開等動作事件，從而實現拖動鼠標來改變圖片大小。

還可以學習css中的clip屬性。

一、CSS實現圖片不透明及裁剪效果。

圖片剪切三層結構 1、第一層opacity,給圖層設置透明度 2、第二層clip，clip屬性：對圖片進行裁剪，實現圖像的一部分顯示，其他部分進行隱藏 3、第三層選取框absolute（與第二層重疊的），包括八個觸點的效果

html代碼：
1 <div id="box"> 2 <img src="img/1.jpg" id="img1" /> 3 <img src="img/1.jpg" id="img2" /> 4 <div id="main"> 5 <div class="Divmin up-left"></div> 6 <div class="Divmin up"></div> 7 <div class="Divmin up-right"></div> 8 <div class="Divmin right"></div> 9 <div class="Divmin right-down"></div> 10 <div class="Divmin down"></div> 11 <div class="Divmin left-down"></div> 12 <div class="Divmin left"></div> 13 </div> 14 </div>

css代碼：

1 body{ 2 background: #333; 3 } 4 #box{ 5 width: 500px; 6 height: 380px; 7 position: absolute; 8 top: 100px; 9 left: 200px; 10 } 11 #img1,#img2{ 12 position: absolute; 13 top: 0; 14 left: 0; 15 } 16 #img1{ 17 opacity: 0.3; 18 } 19 #img2{ 20 clip: rect(0,200px,200px,0); 21 } 22 #main{ 23 position: absolute;/*第三層需用絕對定位浮在上面*/ 24 width: 200px; 25 height: 200px; 26 border: 1px solid #fff; 27 } 28 .Divmin{ 29 position: absolute; 30 width: 8px; 31 height: 8px; 32 background: #fff; 33 } 34 .up-left{margin-top: -4px;margin-left: -4px;cursor: nw-resize;} 35 .up{ 36 left: 50%;/*父元素盒子main寬度的一半，注意要有絕對定位*/ 37 margin-left:-4px; 38 top: -4px; 39 cursor: n-resize; 40 } 41 .up-right{top: -4px;right: -4px;cursor: ne-resize;} 42 .right{top: 50%;margin-top: -4px;right: -4px;cursor: e-resize;} 43 .right-down{right: -4px;bottom: -4px;cursor: se-resize;} 44 .down{bottom: -4px;left: 50%;margin-left: -4px;cursor: s-resize;} 45 .left-down{left: -4px;bottom: -4px;cursor: sw-resize;} 46 .left{left: -4px;top: 50%;margin-top: -4px;cursor: w-resize;}

?

二、javascript獲取選擇框偏移量

選擇框鼠標拖動位置詳解：

offsetLeft:元素相對于其父元素左邊界的距離； clientX：鼠標位置的橫坐標； clientWidth：元素的寬度；

offsetXY:是該事件發生的盒子模型里的坐標，與滾動條無關。
clientXY：是整個瀏覽器可用部分里的坐標，與滾動條無關，即需要拖動滾動條才能看到的區域不考慮。
pageXY：是整個網頁里的坐標，與滾動條有關。

構造一個getPosition()函數，用于獲取元素相對于屏幕左邊及上邊的距離
js代碼如下： 1 //獲取元素相對于屏幕左邊及上邊的距離，利用offsetLeft 2 function getPosition(el){ 3 var left = el.offsetLeft; 4 var top = el.offsetTop; 5 var parent = el.offsetParent; 6 while(parent != null){ 7 left += parent.offsetLeft; 8 top += parent.offsetTop; 9 parent = parent.offsetParent; 10 } 11 return {"left":left,"top":top}; 12 }

?

三、javascript實現控制觸點

監聽鼠標的按下、拖動、松開的事件控制選取框的大小。

注意區別：

Element.clientWidth 屬性表示元素的內部寬度，以像素計。該屬性包括內邊距，但不包括垂直滾動條（如果有的話）、邊框和外邊距。

即clientWidth不包括邊框，offsetWidth包括邊框

1）點擊右面的觸點

js代碼：

1 var mainDiv = $('main'); 2 var rightDiv = $('right'); 3 var isDraging = false; 4 var contact = "";//表示被按下的觸點 5 //鼠標按下時 6 rightDiv.onmousedown = function(){ 7 isDraging = true; 8 contact = "right"; 9 } 10 //鼠標松開時 11 window.onmouseup = function(){ 12 isDraging = false; 13 } 14 //鼠標移動時 15 window.onmousemove = function(e){ 16 if(isDraging == true){ 17 if(contact == "right"){ 18 var e = e||window.event; 19 var x = e.clientX;//鼠標位置的橫坐標 20 var widthBefore = mainDiv.offsetWidth - 2;//選取框變化前的寬度 21 //var widthBefore = mainDiv.clientWidth; 22 var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠標移動后選取框增加的寬度 23 mainDiv.style.width = widthBefore + addWidth + 'px';//選取框變化后的寬度 24 } 25 } 26 } 27 28 //獲取id的函數 29 function $(id){ 30 return document.getElementById(id); 31 }

?

2）點擊上面觸點?

點擊上面中間的觸點移動時，選取框的高度和左上角的位置都需要變化。

增加的高度=選取框相對于屏幕上面的距離 - 鼠標位置的縱坐標

選取框左上角的top值要減去增加的高度，因為鼠標向上移動時高度增加，top值減小，下移時高度減小，top增大。

變化示意圖：

js代碼：

1 else if(contact == "up"){ 2 var y = e.clientY;//鼠標位置的縱坐標 3 var heightBefore = mainDiv.offsetHeight - 2;//選取框變化前的高度 4 var addHeight = getPosition(mainDiv).top - y;//增加的高度 5 mainDiv.style.height = heightBefore + addHeight + 'px';//選取框變化后的寬度 6 mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相當于變化后左上角的縱坐標，鼠標向上移縱坐標減小，下移增大 7 }

?

?3）點擊左邊觸點

原理同點擊上面觸點，寬度和左邊的位置都會變化

變化示意圖：

js代碼：

1 else if(contact == "left"){ 2 var widthBefore = mainDiv.offsetWidth - 2; 3 var addWidth = getPosition(mainDiv).left - e.clientX;//增加的寬度等于距離屏幕左邊的距離減去鼠標位置橫坐標 4 mainDiv.style.width = widthBefore + addWidth + 'px'; 5 mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左邊的距離（相當于左邊位置橫坐標）等于選取框距父級元素的距離減去增加的寬度 6 }
?4）點擊下面觸點

增加的寬度 = 鼠標位置縱坐標 - 距屏幕上邊的距離 - 原先的寬度
左上角的位置不需改變
js代碼：
1 else if(contact = "down"){ 2 var heightBefore = mainDiv.offsetHeight - 2; 3 var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight; 4 mainDiv.style.height = heightBefore + addHeight + 'px'; 5 }

?5）點四個角時的變化是高度和寬度變化的疊加，所以最好將上面四個變化的過程封裝成函數，便于維護和代碼復用。

? ? ? 如果用if else 需要判斷8次，所以改為switch語句來簡化代碼

? ? ? 修改后的js代碼如下：

1 window.onmousemove = function(e){ 2 var e = e||window.event; 3 if(isDraging == true){ 4 switch (contact){ 5 case "up" : upMove(e);break; 6 case "right" : rightMove(e);break; 7 case "down" : downMove(e);break; 8 case "left" : leftMove(e);break; 9 case "up-right" : upMove(e);rightMove(e);break; 10 case "down-right" : downMove(e);rightMove(e);break; 11 case "down-left" : downMove(e);leftMove(e);break; 12 case "up-left" : upMove(e);leftMove(e);break; 13 } 14 } 15 } 16 17 //獲取id的函數 18 function $(id){ 19 return document.getElementById(id); 20 } 21 //獲取元素相對于屏幕左邊及上邊的距離，利用offsetLeft 22 function getPosition(el){ 23 var left = el.offsetLeft; 24 var top = el.offsetTop; 25 var parent = el.offsetParent; 26 while(parent != null){ 27 left += parent.offsetLeft; 28 top += parent.offsetTop; 29 parent = parent.offsetParent; 30 } 31 return {"left":left,"top":top}; 32 } 33 //up移動 34 function upMove(e){ 35 var y = e.clientY;//鼠標位置的縱坐標 36 var heightBefore = mainDiv.offsetHeight - 2;//選取框變化前的高度 37 var addHeight = getPosition(mainDiv).top - y;//增加的高度 38 mainDiv.style.height = heightBefore + addHeight + 'px';//選取框變化后的寬度 39 mainDiv.style.top = mainDiv.offsetTop - addHeight + 'px';//相當于變化后左上角的縱坐標，鼠標向上移縱坐標減小，下移增大 40 } 41 //right移動 42 function rightMove(e){ 43 var x = e.clientX;//鼠標位置的橫坐標 44 var widthBefore = mainDiv.offsetWidth - 2;//選取框變化前的寬度 45 //var widthBefore = mainDiv.clientWidth; 46 var addWidth = x - getPosition(mainDiv).left - widthBefore;//鼠標移動后選取框增加的寬度 47 mainDiv.style.width = widthBefore + addWidth + 'px';//選取框變化后的寬度 48 } 49 //down移動 50 function downMove(e){ 51 var heightBefore = mainDiv.offsetHeight - 2; 52 var addHeight = e.clientY - getPosition(mainDiv).top - mainDiv.offsetHeight; 53 mainDiv.style.height = heightBefore + addHeight + 'px'; 54 } 55 //left移動 56 function leftMove(e){ 57 var widthBefore = mainDiv.offsetWidth - 2; 58 var addWidth = getPosition(mainDiv).left - e.clientX;//增加的寬度等于距離屏幕左邊的距離減去鼠標位置橫坐標 59 mainDiv.style.width = widthBefore + addWidth + 'px'; 60 mainDiv.style.left = mainDiv.offsetLeft - addWidth + 'px';//左邊的距離（相當于左邊位置橫坐標）等于選取框距父級元素的距離減去增加的寬度 61 }

?

四、實現選取框區域明亮顯示

1）選取框內的第二層圖片需重新設置其clip屬性

四個方面圖示：

js代碼：

1 //設置選取框圖片區域明亮顯示 2 function setChoice(){ 3 var top = mainDiv.offsetTop; 4 var right = mainDiv.offsetLeft + mainDiv.offsetWidth; 5 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight; 6 var left = mainDiv.offsetLeft; 7 img2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; 8 }

?

2）鼠標移動時會導致圖片被選中，可在js代碼中添加一行代碼使其禁止圖片被選中
//禁止圖片被選中document.onselectstart = new Function('event.returnValue = false;'); 也可以在css樣式里添加 *{user-select:none}
意思是文本不可選中，對圖片跟div有一樣的效果。

五、實現選取框位置可拖動

首先要阻止事件冒泡
js代碼如下： //鼠標按下觸點時rightDiv.onmousedown = function(e){e.stopPropagation();isDraging = true;contact = "right";}

鼠標拖拽效果的實現可見另一篇隨筆http://www.cnblogs.com/vampire170204/p/6422914.html

六、實現圖片剪切區域預覽

新增一個圖片預覽區域的div

html代碼：

<div id="preview"><img src="img/1.jpg" id="img3" /> </div>

css代碼：

#preview{position: absolute;width: 500px;height: 380px;top: 100px;left:710px ;}#preview #img3{position: absolute;}

注意：要讓clip:rect(top,right,bottom,left) 起作用，必須讓作用元素為相對/絕對定位。

js部分同樣是利用clip屬性，和setChoice()函數同時被調用

同時為了讓右邊預覽區的左上角位置固定，需要設置其top和left的值

1 //右邊圖片預覽函數 2 function setPreview(){ 3 var top = mainDiv.offsetTop; 4 var right = mainDiv.offsetLeft + mainDiv.offsetWidth; 5 var bottom = mainDiv.offsetTop + mainDiv.offsetHeight; 6 var left = mainDiv.offsetLeft; 7 var img3 = $('img3'); 8 img3.style.top = -top + 'px'; 9 img3.style.left = -left + 'px'; 10 img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)"; 11 }

?

?

?

轉載于:https://www.cnblogs.com/Lovebugs/p/6506029.html

總結

以上是生活随笔為你收集整理的用JavaScript实现图片剪切效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。