Image Cutting Effect

In the first blog post, I wrote a JS script to cut images.

 

Basic Ideas:

Layer-3 structure, the first layer is the image with a transparency of 0.7, the second layer is the normal image, the third layer uses a div as the selection box, and uses the absolute position in CSS to overwrite

HTML code

<div id="box">                        <div id="main">            <div class="minDiv left-top" id="leftTop"></div>            <div class="minDiv top" id="top"></div>            <div class="minDiv right-top" id="rightTop"></div>            <div class="minDiv right" id="right"></div>            <div class="minDiv right-bottom" id="rightBottom"></div>            <div class="minDiv bottom" id="bottom"></div>            <div class="minDiv left-bottom" id="leftBottom"></div>            <div class="minDiv left" id="left"></div>        </div>
 </div>

CSS code

body{background-color:#333;}#box{width:522px;height:595px;margin:5px auto;position:relative;}#img-1{position:absolute;left:0;top:0;opacity:0.7;}#img-2{position:absolute;top:0;left:0;clip:rect(0 200px 200px 0);}#main{width:200px;height:200px;border:1px solid #FFF;cursor:move;position:absolute;top:0;left:0;}.minDiv{width:8px;height:8px;background-color:#996633;position:absolute;}.left-top{top:-4px;left:-4px;cursor:nw-resize;}.top{top:-4px;left:50%;margin-left:-4px;cursor:n-resize;}.right-top{top:-4px;right:-4px;cursor:ne-resize;}.right{top:50%;margin-top:-4px;right:-4px;cursor:e-resize;}.right-bottom{bottom:-4px;right:-4px;cursor:se-resize;}.bottom{bottom:-4px;left:50%;margin-left:-4px;cursor:s-resize;}.left-bottom{bottom:-4px;left:-4px;cursor:sw-resize;}.left{left:-4px;top:50%;margin-top:-4px;cursor:w-resize;}

JS Code

function $(id){//通过id获取元素return document.getElementById(id);}function getPosition(node){//获取元素距离视窗的left和top值var left=node.offsetLeft;var top=node.offsetTop;var parent=node.offsetParent;//获取元素的父元素while(parent!=null){left+=parent.offsetLeft;top+=parent.offsetTop;parent=parent.offsetParent;}return  {"left":left,"top":top};//采用对象的形式返回元素距离视窗的left和top值}function setChoice(mainDiv){//设置选中区域高亮var top=mainDiv.offsetTop;var right=mainDiv.offsetLeft+mainDiv.offsetWidth;var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;var left=mainDiv.offsetLeft;var img_2=$("img-2");img_2.style.clip="rect("+top+"px "+right+"px "+bottom+"px "+left+"px)"}window.onload=function( ){document.onselectstart=function(){return false;} //禁止图片被选中var  mainDiv=$("main");var boxDiv=$("box");//获取id为box的元素var boxLeft=getPosition(boxDiv).left;//获取id为box的元素距离视窗左边的距离var boxTop=getPosition(boxDiv).top;//获取id为box的元素距离视窗顶部的距离//获取id为box的元素的宽度和高度var boxWidth=boxDiv.offsetWidth;var boxHeight=boxDiv.offsetHeight;var initialX,initialY,moveOffsetX,moveOffsetY;var ifMouseDown=false;var  contact="";//选取框变化相关代码用函数封装function upMove(event){//选取框向上变化var y=event.clientY;//判断鼠标的clientY是否在box元素上面if( y>boxTop ){var mainY=getPosition(mainDiv).top;var addHeight=mainY-y;var heightBefore=mainDiv.offsetHeight-2;mainDiv.style.height=heightBefore+addHeight+"px";main.style.top=main.offsetTop-addHeight+"px";}}function  rightMove(event){//选取框向右变化//clientX,clientY分别获取鼠标距离视窗的x,y坐标var x=event.clientX;//判断clientX是否在box元素的右边if( x<boxLeft+boxWidth ){var widthBefore=mainDiv.offsetWidth-2; //获取元素原先的宽度，注意offsetWidth会包含边框var addWidth=x-getPosition(mainDiv).left-widthBefore;console.log(addWidth);mainDiv.style.width=widthBefore+addWidth+"px";}}function  downMove(event){//选取框向下变化var y=event.clientY;//判断clientY是否在box元素的下面if( y<boxTop+boxHeight ){var mainY=getPosition(mainDiv).top;var heightBefore=mainDiv.offsetHeight-2;var addHeight=y-heightBefore-mainY;mainDiv.style.height=heightBefore+addHeight+"px";}}function  leftMove(event){var x=event.clientX;//判断clientX是否在box元素的左边if( x>boxLeft ){var mainX=getPosition(mainDiv).left;var addWidth=mainX-x;var widthBefore=mainDiv.offsetWidth-2;mainDiv.style.width=widthBefore+addWidth+"px";mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";    }}//mainDiv元素移动的函数function Move(event){var moveX=0;var moveY=0;var moveX=event.clientX-initialX;var moveY=event.clientY-initialY;if( ifMouseDown ){moveX=event.clientX-moveOffsetX;moveY=event.clientY-moveOffsetY;console.log(moveX);if( mainDiv.offsetLeft+moveX>0&&mainDiv.offsetWidth+moveX<boxDiv.offsetWidth){mainDiv.style.left=moveX+"px";}if( mainDiv.offsetTop+moveY>0&&mainDiv.offsetHeight+moveY<boxDiv.offsetHeight){mainDiv.style.top=moveY+"px";}}}//鼠标在8个触点上面的按下事件var arr_minDiv=mainDiv.getElementsByTagName("div");//获取所有的minDiv元素var length=arr_minDiv.length;for(var i=0;i<length;i++){arr_minDiv[i].onmousedown=function(event){event.stopPropagation();ifMouseDown=true;contact=this.id+"_minDiv";}}//鼠标在mainDiv上面的按下事件mainDiv.onmousedown=function(event){initialX=event.clientX;//获取鼠标按下时的横坐标initialY=event.clientY;//获取鼠标按下时的纵坐标moveOffsetX=initialX-mainDiv.offsetLeft;    moveOffsetY=initialY-mainDiv.offsetTop;ifMouseDown=true;contact="mainDiv";}//鼠标松开事件window.onmouseup=function(){ifMouseDown=false;}//鼠标移动事件window.onmousemove=function( event){//console.log(ifMouseDown);if( ifMouseDown){//采用switch代替多层if elseswitch(contact){case "right_minDiv":rightMove(event);break;case "top_minDiv":upMove(event);break;case "left_minDiv":leftMove(event);break;case "bottom_minDiv":downMove(event);break;case "leftTop_minDiv":leftMove(event);upMove(event);break;case  "rightTop_minDiv":rightMove(event);upMove(event);break;case "rightBottom_minDiv":rightMove(event);downMove(event);break;case "leftBottom_minDiv":leftMove(event);downMove(event);break;//设置mainDiv的移动方式case "mainDiv":Move(event);break;}setChoice(mainDiv);}}}

This blog is free to write and write. It mainly used to be developed on the previous end. Of course, there are also PHP and nonsense.

Image Cutting Effect