欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery的圖片剪切插件

 更新時間：2011年08月03日 23:57:25   作者：  
網(wǎng)頁應用程序需要對豐富的內(nèi)容提供簡單易用的上傳和操作方式，但是這樣會給只有少數(shù)圖片處理技能的用戶造成很大的困難。圖片剪切是最基本的圖片處理技術(shù)，這個詳細的教程將包括在jQuery庫上創(chuàng)建此參加的每一個步驟。
第一步：建立工作區(qū)間

首先，我們要位我們這個教程建立一個工作區(qū)間，建立如圖所示的文件層次結(jié)構(gòu)，以及新建相應的空文件。


<!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;
}
/*初始化網(wǎng)頁樣式*/
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;/*將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。旁邊的內(nèi)聯(lián)對象會被呈遞在同一行內(nèi)，允許空格。支持的瀏覽器有：Opera、Safari*/
height : 360px;
padding : 5px 5px 5px 5px;
width : 480px;
}

以上我們通過改變背景顏色和設置一些基本的樣式，使我們的頁面更具有可觀賞性。
第三步：寫一個基本的jQuery插件
讓我們開始寫一個基本的jQuery插件吧，在寫之前，如果讀者你從未有寫jQuery插件的經(jīng)歷，建議先看看官方給出的插件教程（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;
});
//除非你的插件返回一個確定的值，那么通常情況下要求函數(shù)返回‘this'關鍵字
//以此來保持編程的鏈式化
return this;
};
}) (jQuery);

我們剛剛擴展了jQuery，通過在jQuery.fn這個對象上新添加一個方法屬性。現(xiàn)在我們完成了對每一個對象進行迭代并當其加載完畢時為其附上imageCrop功能的基本插件。注意到被緩存的圖片可能不會被很快的下載，所以重置了它的圖片地址。

第四步：加入可定制的選擇

通過可以定制的選擇，使得對用戶來說有了更多的選擇以及使插件更加具有靈活性。（備注：以下代碼均按照順序來的）
復制代碼 代碼如下:

//將插件的選項封裝在一個常量對象中，遠遠好于傳遞一長串參數(shù)來傳遞。
//這樣使得可以在插件默認的情況下進行擴展
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);

以上我們通過定義一個包含默認選項的數(shù)組，然后通過使用setOption函數(shù)來實現(xiàn)將默認選項和定制選項進行合并。現(xiàn)在讓我們來寫這個合并函數(shù)體
復制代碼 代碼如下:

// 將默認選項和客戶定制的選項合并
function setOptions(customOptions) {
options = $.extend(options, customOptions);
};

$.extend()函數(shù)實現(xiàn)了將兩個或者多個對象合并到第一個對象中的功能。

選項

下面的列表解釋了插件中的每一個選項

allowMove – 指定選擇區(qū)是否可以移動（默認的值是true.）
allowResize – 指定選擇區(qū)是否可以被重新指定大小（默認的值是true）
allowSelect – 指定用戶是否可以重新指定選擇區(qū)（默認的值是true）
minSelect – 一個新的選擇區(qū)最小的大?。J的大小是[0, 0]）
outlineOpacity – 輪廓的透明度（默認的值是0.5）
overlayOpacity – 覆蓋層的透明度（默認的值是0.5）
selectionPosition – 選擇區(qū)得位置（默認的是[0, 0]）
selectionWidth – 選擇區(qū)得寬度（默認的值是0）
selectionHeight – 選擇區(qū)的長度（默認的值是0）
第五步：建立圖像層

這一步我們將改變文檔的結(jié)構(gòu)，以此來為下一步做準備：插件的表面

首先我們要初始化圖像層，然后初始化化圖像包含層
復制代碼 代碼如下:

// 初始化圖像層
var $image = $(object);

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

// imag包含在holder層里面 .wrap()函數(shù)

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

　　正如你所見，包含層和圖像具有同樣的大小并且包含層和圖像是相對定位。然后我們使用.wrap函數(shù)使得圖像包含在其中

在圖像的上面是覆蓋層：
復制代碼 代碼如下:

//初始化一個覆蓋層，并將其置于圖像之上
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)方法將覆蓋層恰好放在圖像層的下面。

下面一層是觸犯器層
復制代碼 代碼如下:

// 初始化一個觸發(fā)器層，并將其放在覆蓋層的上面
var $trigger = $('<div />')
.css({
backgroundColor: '#000000',
opacity: 0,
position: 'absolute'
})
.width($image.width())
.height($image.height())
.insertAfter($overlay);

　　這一次對于用戶來說是不可見的，但是它會處理一些事件。

接下來是邊框?qū)雍瓦x擇層
復制代碼 代碼如下:

// 初始化一個邊框?qū)?，將其放在觸發(fā)器層的上面
var $outline = $('<div id="image-crop-outline" />')
.css({
opacity: options.outlineOpacity,
position: 'absolute'
})
.insertAfter($trigger);

// 初始化一個選擇層，將其置于邊框?qū)拥纳厦?
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會告知我們是否存在著一個選擇區(qū)域，selectionOffset會包含相對于起點的偏移量，selectionOrigin會包含選擇區(qū)域的起點

下面的條件用于當插件被加載時選擇區(qū)域就存在
復制代碼 代碼如下:

//指示選擇區(qū)域的大小是否比最小的大，然后再根據(jù)它來設定選擇區(qū)域是否存在
if (options.selectionWidth > options.minSelect[0] &&
options.selectionHeight > options.minSelect[1])
selectionExists = true;
else
selectionExists = false;
　　現(xiàn)在我們將調(diào)用updateInterface來初始化插件的界面

//第一次調(diào)用‘uploadInterface'函數(shù)來初始化插件的界面
updateInterface();

相關文章

  • jQuery validate插件功能與用法詳解

    jQuery validate插件功能與用法詳解

    這篇文章主要介紹了jQuery validate插件功能與用法,結(jié)合實例形式詳細分析了jQuery validate插件的功能、參數(shù)、使用方法與相關注意事項,需要的朋友可以參考下
    2016-12-12
  • jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)

    jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)

    這篇文章主要是對jQuery獲取Radio,CheckBox選擇的Value值進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2013-12-12
  • jquery replace方法去空格

    jquery replace方法去空格

    本篇文章主要介紹了jquery replace方法去空格的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧
    2017-05-05
  • 詳解EasyUi控件中的Datagrid

    詳解EasyUi控件中的Datagrid

    這篇文章主要介紹了詳解EasyUi控件中的Datagrid的相關資料,需要的朋友可以參考下
    2017-08-08
  • 詳解jQuery簡單的表單應用

    詳解jQuery簡單的表單應用

    本文主要對單行文本框、多行文本框應用、復選框應用、下拉框應用、表單應用進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧
    2016-12-12
  • 關于jquery動態(tài)增減控件的一些想法和小插件

    關于jquery動態(tài)增減控件的一些想法和小插件

    這段代碼壓縮到100行內(nèi)，而且擴展方便，可以非常輕松的增減控件的數(shù)量,使用非常簡單。
    2010-08-08
  • 分享五個有用的jquery小技巧

    分享五個有用的jquery小技巧

    作為輕量級的JS庫，jQuery隨著JavaScrīpt腳本的大熱而備受Web開發(fā)者親睞。本文給大家分享五個有用的jquery小技巧，需要的朋友可以參考下
    2015-10-10
  • jQuery的$.extend 淺拷貝與深拷貝

    jQuery的$.extend 淺拷貝與深拷貝

    這篇文章主要介紹了jQuery的$.extend 淺拷貝與深拷貝的相關資料,需要的朋友可以參考下
    2017-03-03
  • jquery實現(xiàn)圖片放大點擊切換

    jquery實現(xiàn)圖片放大點擊切換

    這篇文章主要為大家詳細介紹了jquery實現(xiàn)圖片放大點擊切換，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-06-06
  • 淺談jQuery事件綁定原理

    淺談jQuery事件綁定原理

    這篇文章主要介紹了淺談jQuery事件綁定原理，并做了簡單分析，然后用實例來展示,需要的朋友可以參考下
    2015-01-01

最新評論