ImgAreaSelect图片区域选择显示..docxVIP

图片区域选择显示１、介绍ImgAreaSelect是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，非常的fashion。另外，可以在这个选择图像区域的基础上应用网站的其他一些技术，比如图片拖曳、图片编辑等。２、基本用法这个插件基于jQuery上通过imgAreaSelect()方法来调用，它操作的对象是HTML中img元素内的图像。代码如下:script type=text/javascript $(document).ready(function () { $(img#photo).imgAreaSelect({ handles: true, onSelectEnd: someFunction }); }); /script如果在jQuery对象里有不止有一个img元素，那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素，它支持任何块级元素（比如有图像背景的div元素）。与其它jQuery插件相似，这个插件可以在$(document).ready() 或者 $(window).load()句柄中初始化。３、选项用户在这个插件的很多方面都可以进行定制，用户通过插件选项来达到这个目的（这些选项会在插件初始化的时候起效）。这些选项包括：选项描述aspectRatio长宽比，以后在选择时候就会维持不变。e.g. 4:3autoHide如果设为true，那么在选择完后区域会消失。Default:falseclassPrefix预先给插件元素的前缀（详见下面：５、元素与类）Default:imgareaselectdisable如果设置成true，这个插件将不起作用（但是图像还是可见的）enable如果设置成true，这个插件又将重新起作用fadeSpeed若设置成大于零的某个数，将渐隐/渐现这个插件Default:truehandles若设置成true，在改变大小的时候显示改变框（就是角点有些小矩形）Default:falsehide若设置成true，则隐藏选择框imageHeight图像的真实高度（因为有可能被CSS缩放过了）imageWidth图像的真实宽度（因为有可能被CSS绽放过了）instance若设为true，imgAreaSelect()函数会返回一个对选择区域图像的一个引用，以便能够进一步使用API。（详见８、API方法）keys启用/关闭键盘支持（详见７、键盘支持）Default:falsemaxHeightmaxWidthminHeightminWidth限制选择框（以像素为单位），设置最大、最小的高度、宽度。movable设置是否支持选择框移动Default:trueparent指定此插件默认所附加到的父元素Default:bodypersistent若设置成true，点击选择区域外将开始一个新的选项（换言之，是否让用户只能移动/缩放选择区域）Default:falseremove若设置成true，则该插件将完全移除resizable决定选择区域是否可以改变大小Default:trueresizeMargin当选择区域宽度超过多少像素时将启用可改变大小模式show如果设置成true，选择区域将可见x1y1初始化时选择框左上角的坐标x2y2初始化时选择框右下角的坐标zIndex设置此插件所作用元素的z-index的值，一般情况下，imgAreaSelect 总是可以自动计算出它的值，但是极少数情况下还是有必要设置的。onInit当插件初始化时所调用的函数（详见６、回调函数）onSelectStart当开始选择时所调用的函数（详见６、回调函数）onSelectStart当开始选择时所调用的函数（详见６、回调函数）onSelectChange当改变选择区域时所调用的函数（详见６、回调函数）onSelectEnd当选择结束时所调用的函数（详见６、回调函数）４、样式表随着插件发放的还有三个样式表：imgareaselect-default.css –这是默认的样式表, imgareaselect-animated.css –这个样式与默认的样式表基本是一样的，只是它能够让选择区域边框变化imgareaselect-deprecated.css –只有你想使用不赞同的选项时才用这个样式表。你只需要在html头部将其中的一个样式表添加进来就可以。这css文件夹中还包含４张gif图片，它们是用来显示边框的。５、元素与类此插件通过创建几个div元素来表示选择区域，包括边框、可调整手柄以及未选择的区域。这些元素已经指定了特定的类名了，所以你可以通过CSS或者jQuery选择器来获得并操作它们。类名指定给的对象imgareaselect-selection选择的区域imgareaselect-b