JavaScript实现图片剪切效果

慕课网的学习视频笔记：http://www.imooc.com/learn/144。

实现过程分两部分：

1.使用CSS进行页面布局

（1）通过3层来实现，最底层的固定不动半透明图片，中间层的部分不透明的清晰图片以及最上层的选取框。

（2）在一张大图中显示一小块区域，其它部分隐藏。这块区域是边长100px的正方形，并且左上角相对于整张图片的坐标是x=10px，y=10px,实现方法为：clip：rect（10px，110px，110px，10px）

（3）要将一个宽度为8px的div始终水平居中显示在其父元素中，但其父元素的宽度不确定，用css的实现方法为：

｛position:absolute;left:50%;margin-left:-4px;｝

2.使用JS实现效果

（1）鼠标事件：按下事件、释放事件和拖动事件。

（2）拖动效果（放大）：JS获取鼠标位置来确定选取框的位置

（3）鼠标变化时不停的改变选取框的位置和大小从而达到选取框跟随变化的效果。

（4）offsetLeft:元素相对于父元素左边界的距离。

（5）获取鼠标在屏幕中的横坐标：event.clientX。

（6）获取元素div相对于父元素(已定位)的左边距：div.offsetLeft（是具体的值）。若要为div的左边距赋值用：div.style.left="";

（7）js事件冒泡是指鼠标点击里面的元素时也会触发其父元素的一些事件，为了阻止这种情况，应该在里面元素的触发函数里第一行加上:event.stopPropagation();

html：

<span style="font-size:14px;"><!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.8.1.min.js"></script>
<script src="jquery-ui-1.10.4.custom.min.js"></script>
<script  src="test.js"></script>
<title>picture shear</title>
<style>body{ background-color:#333;}#box{position: absolute;top:100px;left:200px;width:460px;height:360px;}#div1{ position:absolute;}#img1{ opacity:0.2;position:absolute;top:0; left:0;}#img2{ position:absolute; top:0; left:0; clip:rect(0,200px,200px,0)}#main{ border: 1px solid #fff; width:200px; height:200px;position:absolute;}.minDiv{border: 1px solid #fff; width:8px; height:8px; position:absolute;background:#fff;}.m1{left:-4px;top:-4px; cursor: nw-resize;}.m2{left:50%; margin-left:-4px;top:-4px; cursor:n-resize;}.m3{right:-4px;top:-4px; cursor:ne-resize;}.m4{left:-4px; top:50%; margin-top:-4px;cursor: w-resize;}.m5{ right:-4px; top:50%; margin-top:-4px; cursor: e-resize;}.m6{ left:-4px; bottom:-4px; cursor:sw-resize;}.m7{ left:50%; margin-left:-4px;bottom:-4px;cursor: s-resize}.m8{ right:-4px; bottom:-4px; cursor:se-resize;}#preView{ position:absolute; top:100px; left:670px;width:460px;height:360px;}#img3{ position:absolute;};
</style></span><span style="font-size: 14px;"></head>
<body>
<div id="box"><div id="div1"><img src="1.jpg" name="img1" width="460" height="360"  id="img1"/><img src="1.jpg" name="img2" width="460" height="360"  id="img2"/></div><div id="main"><div id="left-up" class="minDiv m1"></div><div id="up" class="minDiv m2"></div><div id="right-up"class="minDiv m3"></div><div id="left" class="minDiv m4"></div><div id="right" class="minDiv m5"></div><div id="left-down" class="minDiv m6"></div><div id="down" class="minDiv m7"></div><div id="right-down" class="minDiv m8"></div></div>
</div>
<div id="preView"><img src="1.jpg" name="img3" width="460" height="360"  id="img3"/>
</div>
</body>
</html></span>

test.js：

<span style="font-size:14px;">window.οnlοad=function(){document.onselectstart=new Function('event.returnValue=false;');//禁止文档被选中   //$("#main").draggable({containment:'parent',drag:setChoice});$( "#main" ).draggable({ containment: 'parent' ,drag: setChoice});var rightDiv=document.getElementById("right");var mainDiv=document.getElementById("main");var upDiv=document.getElementById("up");var leftDiv=document.getElementById("left");var downDiv=document.getElementById("down");var leftUpDiv=document.getElementById("left-up");var rightUpDiv=document.getElementById("right-up");var leftDownDiv=document.getElementById("left-down");var rightDownDiv=document.getElementById("right-down");var ifKeyDown=false;var contact="";
//鼠标按下事件
rightDiv.οnmοusedοwn=function(e){e.stopPropagation();//阻止js事件冒泡ifKeyDown=true;contact="right";}
upDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="up";}
leftDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="left";}
downDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="down";}
leftUpDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="left-up";}
rightUpDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="right-up";}
leftDownDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="left-down";}
rightDownDiv.οnmοusedοwn=function(e){e.stopPropagation();ifKeyDown=true;contact="right-down";}
//鼠标松开事件
window.οnmοuseup=function(){ifKeyDown=false;}
//鼠标移动事件
window.οnmοusemοve=function(e){if(ifKeyDown==true){switch(contact){//switch的执行效率比if高case"right":rightMove(e);break;case"left":leftMove(e);break;case"up":upMove(e);break;case"down":downMove(e);break;case"left-up":leftMove(e);upMove(e);break;case"right-up":rightMove(e);upMove(e);break;case"left-down":leftMove(e);downMove(e);break;case"right-down":rightMove(e);downMove(e);break;}}setChoice();setPreview();}
//right移动
function rightMove(e){var x=e.clientX;//鼠标x坐标var beforeWidth=mainDiv.offsetWidth-2;//选取框变化之前的宽度var addWidth=x-getPosition(mainDiv).left-beforeWidth;//鼠标移动后选取框增加的宽度mainDiv.style.width=addWidth+beforeWidth+"px";//选取框变化之后的宽度}
//left移动
function leftMove(e){var x=e.clientX;var beforeWidth=mainDiv.offsetWidth-2;var addWidth=getPosition(mainDiv).left-x;mainDiv.style.width=addWidth+beforeWidth+"px";mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";}
//up移动
function upMove(e){var y=e.clientY;var beforeHeight=mainDiv.offsetHeight-2;var mainY=getPosition(mainDiv).top;var addHeight=mainY-y;mainDiv.style.height=addHeight+beforeHeight+"px";//选取框变化后的高度mainDiv.style.top=mainDiv.offsetTop-addHeight+"px";//选取框变化后上面触点的坐标}
//down移动
function downMove(e){var y=e.clientY;var beforeHeight=mainDiv.offsetHeight-2;var mainY=getPosition(mainDiv).top;var addHeight=y-mainY-beforeHeight;mainDiv.style.height=addHeight+beforeHeight+"px";//默认情况是向下、向右增长，因此不用设置坐标//mainDiv.style.down=mainDiv.offsetDown-addHeight+"px";}
//设置选框区域明亮显示
function setChoice(){var top=mainDiv.offsetTop;var right=mainDiv.offsetLeft+mainDiv.offsetWidth;var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;var left=mainDiv.offsetLeft;var img2=document.getElementById("img2");img2.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";}
//设置预览
function setPreview(){var top=mainDiv.offsetTop;var right=mainDiv.offsetLeft+mainDiv.offsetWidth;var bottom=mainDiv.offsetTop+mainDiv.offsetHeight;var left=mainDiv.offsetLeft;var img3=document.getElementById("img3");img3.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";//调用clip属性的图片需设置绝对定位,因为需要设置top、left等img3.style.top=-top+"px";//img3.offsetTop是具体值，因此不能被赋值img3.style.left=-left+"px";}
}// 获取元素相对于屏幕左边和上边的距离
function getPosition(node){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};
}</span>

JavaScript实现图片剪切效果相关推荐

用JavaScript实现图片剪切效果
学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第 ...
javascript图片剪切效果
序一(08/07/21) 很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪.图片剪切(设置一下也可以做出放大镜等类似的效果). 当时觉得很神奇,碍于水平有限,没做出来. 前些日子突然想 ...
javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
【小5聊】纯javascript实现图片放大镜效果
实现图片放大镜效果,其实就是一个比例放大的效果以下通过纯javascript方式对图片进行等比例放大,等比倍数和出界判断可自行实现文章后面会附上全部代码放大镜效果 1. 放大镜组成 1)目标图 ...
用JavaScript完成图片爆炸效果
开发工具与关键技术:Adobe Dreamweaver CC 2017 JavaScript 作者:孙水兵撰写时间:2019年2月15 案例来源于51ct学院李游图片爆炸效果就是将一张图片碎成若干 ...
javascript实现图片滚动效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
css 剪辑图片_使用CSS的clip-path实现图片剪切效果
最近有个业务需求:校对图片文本信息,如下图所示,当鼠标点击文本中某一行的时候,文本上会显示对应行图片同时左侧会显示对应位置的画框. clip-path 今天要说的主题是:如何剪切原图中的部分图片?(前 ...
CSS3配合JavaScript图片爆炸效果
CSS3配合JavaScript实现图片爆炸效果先看看效果图: 代码如下: boom.html <!DOCTYPE html> <html lang="en"& ...

JavaScript实现图片剪切效果

JavaScript实现图片剪切效果相关推荐

最新文章

热门文章