今天图老师小编给大家介绍下JavaScript教程:图片切割效果，平时喜欢JavaScript教程:图片切割效果的朋友赶紧收藏起来吧！记得点赞哦~
【 tulaoshi.com - Web开发 】
自上一个版本的图片切割效果出来后，虽然也经常看到框架开发这个如何如何容易之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。
上一个版本由于是初次接触这类效果，而且是三个大功能一起开发，能力所限，所以仅仅是实现了效果就完成了。
近来我把其中的 拖放效果 和 缩放效果 单独出来研究，经过整理和完善，再套进切割效果，个人感觉效果已经不错了。
要说明的是这个只是一个效果，并不是真正的切割图片，要获取真正的切割图片请参考 图片切割系统 。
效果预览请看这里
完整实例下载
代码太多贴不出来，只好给个效果图：
程序说明
这个效果主要分三个部分：层的拖放、层的缩放、图片切割（包括预览）。
其中 层的拖放 和 层的缩放 我已经在其他两篇文章中有详细说明，这里就说说图片切割这部分吧。
图片切割
关于图片切割的设计，有三个方法：
把图片设为背景图，通过设置背景图的位置来实现，但这样的缺点是只能按图片的正常比例实现，不够灵活； 把图片放到切割对象里面，通过设置图片的top和left实现，这个方法是可行，但下面有更简单的方法实现； 通过设置图片的clip来实现。这里介绍方法3的实现方法，这个方法是从当年珍藏的代码中看到的，先说说clip：
clip的作用是检索或设置对象的可视区域。可视区域外的部分是透明的。
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。
例如：
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的设置是必须的（详细看手册）。
下面说说具体实现原理：
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）首先需要一个容器(_Container)，容器里面会插入三个层：
底图层(_layBase)：那个半透明的图片； 切割层(_layCropper)：正常显示的那个部分； 控制层(_layHandle)：就是控制显示的那个部分。其中为了底图层和切割层是程序自动创建的图片，控制层是自己定义的层（程序中是一个div）。
底图层和切割层必须完全重合，程序中把这两个层都绝对定位到了左上角：
this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;
层叠顺序也要设置一下保证各层顺序。
来源:https://www.tulaoshi.com/n/20160220/1632702.html
看过《JavaScript教程:图片切割效果》的人还看了以下文章 更多>>
