第一步：建立工作空间首先，我们需要为我们的教程建立一个工作空间，建立如图所示的文件层次结构，并新建相应的空文件。

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-transition . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head runat=' server ' title/title script src=' https : scripts/Jquery-1 . 4 . 1 . min . js ' type=' text/JavaScriptJPG ' width=' 480 '/div！-图片装饰层- /div！-# wrapping layer-/form/body/html[/code]style . CSS复制代码如下： * { margin : 0；轮廓： 0；填充： 0；}/*初始化网页样式*/正文{背景-颜色： #已显示；颜色： # 646464；font-family : 'Verdana '，'日内瓦'，无衬线；font-size : 12px文本阴影： 0 1px 0 # ffffff} h1 { font-size : 24px字体粗细：正常；边距： 0 0 10px 0} div # wrapper { margin : 25px 25px 25px；}/*选择div */div . image-decorator {-moz-border-radius : 5px 5px 5px带id包装；/* Firefox浏览器框锐化*/-moz-box-shadow : 006 px # c8c 8；/*火狐浏览器的边框阴影处理*/-WebKit-边框-RADIUS : 5px 5px 5px；/*WebKit是一个开源的浏览器引擎*/-WebKit-box-shadow 3360 006 px # c8c 8；背景色： # ffffff边框： 1px实心# c8 c8；边框半径： 5px 5px 5px 5px箱形阴影： 0 0 6px # c8 c8；显示：内嵌块；/*对象呈现为内嵌对象，但对象的内容呈现为块对象。旁边的内联对象将呈现在同一行，允许空格。支持的浏览器有：Opera、Safari */height : 360 px；衬垫： 5px 5px 5px 5px宽度： 480px}以上，我们更改了背景颜色，并设置了一些基本样式，使我们的页面更令人愉快。第三步：编写一个基本的jQuery插件。让我们开始编写一个基本的jQuery插件。写之前，如果读者从来没有写过jQuery插件，建议看一下官方的插件教程(http://docs . jQuery.com/Plugins/Authoring)。这是英文版，中文版还没找到。作者打算翻译它。敬请期待。打开/resources/js/image crop/jquery . image crop . js，添加如下图所示的js代码。复制代码如下： //一般请在'('(function($){///插件代码在此}) (jQuery)中包含编写好的插件代码；(函数($) { $。imageCrop=function(object，custom options){ }；$.fn.imagecrop=function(自定义选项){//迭代每个对象//迭代这个。各(函数(){var current object=this，image=new image()；//加载对象时，添加imageCrop裁剪图像的功能。onload=function () {$。图像裁剪(当前对象、自定义选项)；};//重置图片的地址，因为有时候缓存的图片无法快速加载。image . src=CurrentObject . src；});//除非你的插件返回一个确定的值，通常要求函数返回关键字‘this’//才能保持编程的链式并返回this；};})(jQuery)；我们刚刚通过向jQuery.fn添加一个新的方法属性来扩展jQuery。现在我们已经完成了对每个对象的迭代，并在加载imageCrop函数时将它的基本插件附加到它上面。请注意，缓存的图片可能不会很快下载，因此请重置其图片地址。步骤4:添加可定制的选项。通过可定制的选择，用户将有更多的选择，插件将更加灵活。

(注意：下面的代码是按顺序来的)复制的代码如下： //将插件的选项封装在一个常量对象中要比传递一长串参数好得多。//这使得在默认情况下扩展插件成为可能。var默认选项={allowmove : true，allowsize 3360 true，allowselect : true，min sele :[0，0]，outlineOpacity: 0.5，overlayOpacity: 0.5，selectionPosition: [0，0]，selection width : 0 0，selection width : }；//将选项设置为默认选项var options=defaultOptions//然后与客户定制的选项进行合并setOptions(custom options)；上面，我们定义了一个包含默认选项的数组，然后使用setOption函数将默认选项和自定义选项结合起来。现在，让我们将这个合并后的函数体的复制代码编写如下： //将默认选项与客户定制的选项合并。功能集选项(自定义选项){options=$。扩展(选项，自定义选项)；};美元。extend()函数实现了将两个或多个对象合并到第一个对象中的功能。下面的选项列表解释了插件中的每个选项：allow move指定是否可以移动选择区域(默认值为true。)allowsize指定是否可以调整选择区域的大小(默认值为true)allowsele指定用户是否可以重新分配选择区域(默认值为true)min sele新选择区域的最小大小(默认大小为[0，0])轮廓不透明度轮廓的透明度(默认值为0.5)叠加不透明度叠加的透明度(默认值为0.5)选择位置选择区域的位置(默认值为[0，0])选择宽度选择区域的宽度(默认值为0)选择长度第五步：建立图像层。在这一步中，我们将更改文档的结构，为下一步做准备：插件表面。

我们需要先初始化图像层，然后初始化图像包含层的复制代码如下： //初始化图像层var $ image=$(object)；//初始化图像支持层var $ holder=$ ('div/')。CSS ({position:' relative'})。width ($ image.width())。高度($ image . height())；//imag包含在支架层中。wrap()函数$ image。包装($ holder)。CSS({ position : ' absolute ' })；如您所见，包含层和图像具有相同的大小，并且相对定位。然后，我们使用。函数使图像包含在其中。在图像的顶部是一个覆盖：复制代码如下： //初始化一个覆盖。并将其放在图像var $ overlay=$(' div id=' image-crop-overlay '/'之上)。CSS({ opa city 3360 options。叠加不透明度，位置： '绝对' })。width($image.width())。高度($image.height())。insertAfter($ image)；该层与图像大小相同，但绝对定位。这个元素有一个Id，所以我们可以通过插件改变css来改变它的样式。最后，我们使用。insertAfter($image)方法将覆盖层放在图像层的正下方。下一层是违规层。复制代码如下： //初始化一个触发层，并将其放在覆盖层的顶部。var $ trigger=$ ('div/')。CSS({ background color : ' # 00000 '，opacity3360，position: 'absolute' })。width($image.width())。高度($image.height())。insertAfter($ overlay)；这一次它对用户来说是不可见的，但是它会处理一些事件。接下来，边框层和选择层的复制代码如下： //初始化一个边框层，放在触发层var $ outline=$(' div ID=' image-crop-outline '/'之上)。CSS({ opa city 360选项。outlineopacity，位置： '绝对' })。//初始化一个选择层，并将其放置在边框层的顶部。var $ selection=$ ('div/')。CSS({ background : ' URL(' $ image . attr(' src ')' no-repeat '，position:' absolute'})。插入后。那个。attr()方法用于返回特定属性的值。我们用它来获取图像的地址，并把它作为选择层的背景，它绝对定位在相对定位里面。相对定位的元素可以控制绝对定位的元素，使得绝对定位的元素位于相对定位的元素内部。这就是为什么包含层是相对定位的，它的所有子元素都是绝对定位的。第六步：更新界面。首先，我们需要对一些全局变量进行初始复制代码如下： //初始化全局变量var selection存在，selectionoffset=[0，0]，selectionorigin=[0，0]；SelectionExists会告诉我们是否有选择区域，selectionOffset会包含从起点的偏移，selectionOrigin会包含选择区域的起点。以下条件用于在加载插件时使选择区域存在。然后，根据它，设置选择区域是否存在if (options。选择宽度选项。minselect选项。选择高度选项。minsele[1])selection exists=true；else selectionExists=false现在我们将调用updateInterface来初始化插件接口。//第一次调用‘uploadInterface’函数初始化插件接口updateInterface()；