基于jQuery的图片剪切插件_jquery

第一步:建立工作区间

首先,我们要位我们这个教程建立一个工作区间,建立如图所示的文件层次结构,以及新建相应的空文件。

<!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 runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="resources/css/style.css" rel="stylesheet" type="text/css" />
<link href="resources/js/imageCrop/jquery.imagecrop.css" rel="stylesheet" type="text/css" />
<script src="resources/js/imageCrop/jquery.imagecrop.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<h1>
Jquery Image Croping plug-in</h1>
<div class="image-decorator">
<img alt="Jquery Image Croping plug-in" height="360px" id="example" src="resources/images/example.JPG"
width="480" /></div><!--图片修饰层-->
</div><!--#包裹层 -->
</form>
</body>
</html>
[/code]
style.css

复制代码 代码如下:

* {
margin : 0;
outline : 0;
padding : 0;
}
/*初始化网页样式*/
body {
background-color : #ededed;
color : #646464;
font-family : 'Verdana', 'Geneva', sans-serif;
font-size : 12px;
text-shadow : 0 1px 0 #ffffff;
}
h1 {
font-size : 24px;
font-weight : normal;
margin : 0 0 10px 0;
}
div#wrapper {
margin : 25px 25px 25px 25px;
}
/*选择id为wrapper的div*/
div.image-decorator {
-moz-border-radius : 5px 5px 5px 5px;/*针对火狐的浏览器的盒子的锐化*/
-moz-box-shadow : 0 0 6px #c8c8c8;/*针对火狐的浏览器的盒子的边框阴影处理*/
-webkit-border-radius : 5px 5px 5px 5px;/*WebKit 是一个开源的浏览器引擎*/
-webkit-box-shadow : 0 0 6px #c8c8c8;
background-color : #ffffff;
border : 1px solid #c8c8c8;
border-radius : 5px 5px 5px 5px;
box-shadow : 0 0 6px #c8c8c8;
display : inline-block;/*将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。支持的浏览器有:Opera、Safari*/
height : 360px;
padding : 5px 5px 5px 5px;
width : 480px;
}

以上我们通过改变背景颜色和设置一些基本的样式,使我们的页面更具有可观赏性。
第三步:写一个基本的jQuery插件
让我们开始写一个基本的jQuery插件吧,在写之前,如果读者你从未有写jQuery插件的经历,建议先看看官方给出的插件教程(http://docs.jquery.com/Plugins/Authoring),这个是英文版的,中文版的没找的,写者打算翻译,敬请期待。
打开/resources/js/imageCrop/jquery.imagecrop.js,并且加入如下图所示的js代码

复制代码 代码如下:

//一般情况下请将所写的插件代码包含在‘(function($) { // 插件代码在这里 }) (jQuery);'
(function($) {
$.imageCrop = function(object, customOptions) {};
$.fn.imageCrop = function (customOptions) {
//Iterate over each object
//对每一个对象进行迭代
this.each(function () {
var currentObject = this,
image = new Image();
//当对象加载完毕时,给予附加上imageCrop剪切的功能
image.onload = function () {
$.imageCrop(currentObject, customOptions);
};
//重设图片的地址,因为有时被缓存的图像不能被很快的加载
image.src = currentObject.src;
});
//除非你的插件返回一个确定的值,那么通常情况下要求函数返回‘this'关键字
//以此来保持编程的链式化
return this;
};
}) (jQuery);

我们刚刚扩展了jQuery,通过在jQuery.fn这个对象上新添加一个方法属性。现在我们完成了对每一个对象进行迭代并当其加载完毕时为其附上imageCrop功能的基本插件。注意到被缓存的图片可能不会被很快的下载,所以重置了它的图片地址。

第四步:加入可定制的选择

通过可以定制的选择,使得对用户来说有了更多的选择以及使插件更加具有灵活性。(备注:以下代码均按照顺序来的)

复制代码 代码如下:

//将插件的选项封装在一个常量对象中,远远好于传递一长串参数来传递。
//这样使得可以在插件默认的情况下进行扩展
var defaultOptions = {
allowMove: true,
allowResize: true,
allowSelect: true,
minSelect: [0, 0],
outlineOpacity: 0.5,
overlayOpacity: 0.5,
selectionPosition: [0, 0],
selectionWidth: 0,
selectionHeight: 0
};

// 将选项设为默认选项
var options = defaultOptions;

// 然后将其和客户定制的选项合并
setOptions(customOptions);

以上我们通过定义一个包含默认选项的数组,然后通过使用setOption函数来实现将默认选项和定制选项进行合并。现在让我们来写这个合并函数体

复制代码 代码如下:

// 将默认选项和客户定制的选项合并
function setOptions(customOptions) {
options = $.extend(options, customOptions);
};

$.extend()函数实现了将两个或者多个对象合并到第一个对象中的功能。

选项

下面的列表解释了插件中的每一个选项

allowMove – 指定选择区是否可以移动(默认的值是true.)
allowResize – 指定选择区是否可以被重新指定大小(默认的值是true)
allowSelect – 指定用户是否可以重新指定选择区(默认的值是true)
minSelect – 一个新的选择区最小的大小(默认的大小是[0, 0])
outlineOpacity – 轮廓的透明度(默认的值是0.5)
overlayOpacity – 覆盖层的透明度(默认的值是0.5)
selectionPosition – 选择区得位置(默认的是[0, 0])
selectionWidth – 选择区得宽度(默认的值是0)
selectionHeight – 选择区的长度(默认的值是0)
第五步:建立图像层

这一步我们将改变文档的结构,以此来为下一步做准备:插件的表面

首先我们要初始化图像层,然后初始化化图像包含层

复制代码 代码如下:

// 初始化图像层
var $image = $(object);

// 初始化一个图像支持层
var $holder = $('<div />')
.css({
position: 'relative'
})
.width($image.width())
.height($image.height());

// imag包含在holder层里面 .wrap()函数

$image.wrap($holder)
.css({
position: 'absolute'
});

  正如你所见,包含层和图像具有同样的大小并且包含层和图像是相对定位。然后我们使用.wrap函数使得图像包含在其中

在图像的上面是覆盖层:

复制代码 代码如下:

//初始化一个覆盖层,并将其置于图像之上
var $overlay = $('<div id="image-crop-overlay" />')
.css({
opacity: options.overlayOpacity,
position: 'absolute'
})
.width($image.width())
.height($image.height())
.insertAfter($image);

  这个层同样和图像一样大,但是是绝对定位。我们从options.outlineOpacity得到透明度。这个元素拥有一个Id,所以我们可以改变通过插件的css来改变它的样式。在最后我们用.insertAfter($image)方法将覆盖层恰好放在图像层的下面。

下面一层是触犯器层

复制代码 代码如下:

// 初始化一个触发器层,并将其放在覆盖层的上面
var $trigger = $('<div />')
.css({
backgroundColor: '#000000',
opacity: 0,
position: 'absolute'
})
.width($image.width())
.height($image.height())
.insertAfter($overlay);

  这一次对于用户来说是不可见的,但是它会处理一些事件。

接下来是边框层和选择层

复制代码 代码如下:

// 初始化一个边框层,将其放在触发器层的上面
var $outline = $('<div id="image-crop-outline" />')
.css({
opacity: options.outlineOpacity,
position: 'absolute'
})
.insertAfter($trigger);

// 初始化一个选择层,将其置于边框层的上面
var $selection = $('<div />')
.css({
background: 'url(' + $image.attr('src') + ') no-repeat',
position: 'absolute'
})
.insertAfter($outline);

  .attr()方法是用来返回某个特定的属性的值,我们用它来得到图像的地址,并将其作为选择层的背景

绝对定位在相对定位里面

一个相对定位的元素可以控制绝对定位的元素,使得绝对定位的元素在相对定位的元素的里面。这也算为什么包含层是相对定位,而所有的它的子元素都是绝对定位

第六步:更新界面

      首先我们要初始为一些全局变量

复制代码 代码如下:

//初始化全局变量
var selectionExists,
selectionOffset = [0, 0],
selectionOrigin = [0, 0];

  selectionExists会告知我们是否存在着一个选择区域,selectionOffset会包含相对于起点的偏移量,selectionOrigin会包含选择区域的起点

下面的条件用于当插件被加载时选择区域就存在

复制代码 代码如下:

//指示选择区域的大小是否比最小的大,然后再根据它来设定选择区域是否存在
if (options.selectionWidth > options.minSelect[0] &&
options.selectionHeight > options.minSelect[1])
selectionExists = true;
else
selectionExists = false;
  现在我们将调用updateInterface来初始化插件的界面

//第一次调用‘uploadInterface'函数来初始化插件的界面
updateInterface();

时间: 2024-11-18 01:39:14

基于jQuery的图片剪切插件_jquery的相关文章

推荐6款基于jQuery实现图片效果插件_jquery

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

autoIMG 基于jquery的图片自适应插件代码_jquery

为了防止图片撑破布局,最常见的仍然是通过onload后获取图片尺寸再进行调整,所以加载过程中仍然会撑破.而Qzone日志的图片在此进行了改进,onload完毕后才显示原图.我以前用onload写过一个小例子:http://www.planeart.cn/?p=1022 通过imgReady可以跨浏览器在dom ready就可以实现图片自适应,无需等待img加载,代码如下: 复制代码 代码如下: // jQuery.autoIMG.js v0.2 // Tang Bin - http://plan

Notify - 基于jquery的消息通知插件_jquery

Sticky是一个简单的页面消息提醒jQuery插件.可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现.可以手动关闭消息,也可以设置成自动关闭. http://thrivingkings.com/sticky/        2)JNotify是一个JQuery插件,基于JQuery UI实现,用于创建页面消息提醒和状态提示条.   http://jnotify.codeplex.com/  演示地址:http://www.fabiofranzini.com/jNotify/Demo

基于jQuery的表格操作插件_jquery

大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式.但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表.今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示.排序.筛选和操控.如jQuery表格排序插件.jQuery表格拖拽插件.jQuery树形表格插件.设置颜色.点击.替换等效果. 1.DataTables-强大的jQuery表格插件 DataTables是提供了大量特性的强大jQuery表格插件.例

TimergliderJS 一个基于jQuery的时间轴插件_jquery

Timeglider JS是一个由javascript支持缩放,数据驱动的时间轴组件.非常适合显示项目历史,项目计划及其其它需要显示历史的项目. 时间轴可以通过右边拖放垂直滑动器来缩放界面:向上缩小,向下放大.同时也支持使用滚轮来控制缩放.通过鼠标拖东空白处可以左右拖动时间轴,点击事件可以弹出一个小窗口来描述时间内容及其数据. JS组件有以下几个目标: 支持iPads和其它支持触摸的设备 非常容易整合到基于HTML/JS应用和界面 支持复杂的布局,并且可以对任何指定自定义HTML元素添加事件 安

11个用于提高排版水平的基于jquery的文字效果插件_jquery

排版是在网页设计当中的一个重要的元素,实现一个高层次的排版风格可以让你的网页设计看起来更令人叹为观止,当你看到一些非同寻常的排版样式,你很好奇这些绚丽的色彩文字搭配效果是如何实现的,往往我们第一印象是使用CSS实现的,可是对于自己来说感到又有一定的难度,如今的瀑布流效果,大背景缩略图效果,我们其中只关注了图片绚丽的布局,其实还有一个细节就是文字色彩排版的实现,这个其实是主要的,有一些专门用于这些效果的jQuery插件,你可以实现卓越的排版设计在您的网站上.我们都知道,在传统的排版当中使用DIV+

niceTitle 基于jquery的超链接提示插件_jquery

这不是真正的预览,在读取文字列表的时候同时读取每个文章的内容概要(即想要预览的内容),然后使用该插件就可以实现假预览. 效果图如下,自己可以相应修改 代码如下: 复制代码 代码如下: <link rel="Stylesheet" type="text/css" href="Styles/jQuery.niceTitle.css" /> <script type="text/javascript" src=&q

jquery.cvtooltip.js 基于jquery的气泡提示插件_jquery

序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

基于jQuery的history历史记录插件_jquery

关于jQuery的历史 jQuery history plugin helps you to support back/forward buttons and bookmarks in your javascript applications.历史的jQuery插件可以帮助您回到您的JavaScript支持应用程序/前进按钮和书签. You can store the application state into URL hash and restore the state from it.你可