云南網站建設創新企業 昆明多彩網絡公司

|網頁對話|電話:0871-63215311

Jcrop(圖片裁剪)中文文檔手冊

來源:昆明網站制作 日期:2010-07-06 閱讀: 發表評論

Jcrop是一款jquery圖片裁剪插件,可以實現圖片在線裁剪,達到和圖像軟件處理的效果,界面和操作也相當的人性化,只需要拖曳鼠標即可完成,部署到服務器也非常簡單,本文是Jcrop的中文文檔手冊

多彩科技原創翻譯,轉載請注明出處:http://www.ccrikj.icu

Jcrop是一款jquery圖片裁剪插件,可以實現圖片在線裁剪,達到和圖像軟件處理的效果,界面和操作也相當的人性化,只需要拖曳鼠標即可完成,部署到服務器也非常簡單,在網站建設過程中輕易美化表單,并且改善用戶體驗,本文是Jcrop的中文文檔手冊。

入門
下載當前版本
•放到頁面相應的位置
•同時也需要加載jquery

加載順序
•jQuery.js
•Jcrop.js
•Jcrop CSS樣式
如:
<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
注意:你也可以調整成其他的位置

調用
假如:<img src="flowers.jpg" id="cropbox" />
編寫以下腳本
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop();
});
</script>
Jcrop就可以激活了

事件處理
Jcrop有2個主要的事件處理程序 onChange 和 onSelect.
onSelect callback 選擇完成后調用
onChange callback 選框移動(或者說改變)時調用
定義一個事件出來函數
<script language="Javascript">
function showCoords(c)
{
// variables can be accessed here as
// c.x, c.y, c.x2, c.y2, c.w, c.h
};
</script>
然后附加上去
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
onChange: showCoords
});
});
</script>
這是一個標準的jquery語法,注意最好一個屬性后面沒有逗號

設置選項
參數名稱 類型 描述 默認
aspectRatio decimal 設定寬高比 n/a
minSize array [ w, h ] 設置最小尺寸 n/a
maxSize array [ w, h ] 設置最大尺寸 n/a
setSelect array [ x, y, x2, y2 ] 設置一個初選框的位置 n/a
bgColor color value 設置背景容器顏色 'black'
bgOpacity decimal 0 - 1 設置當圖像被裁剪選框外的透明度 .6
如:
<script language="Javascript">
jQuery(function() {
jQuery('#cropbox').Jcrop({
onSelect: showCoords,
bgColor: 'black',
bgOpacity: .4,
setSelect: [ 100, 100, 50, 50 ],
aspectRatio: 16 / 9
});
});
</script>

注意

•Text 必須有引號
•其他就不要有引號
•最后一個參數后面沒有逗號

發表評論評論列表(有 條評論)

相關文章:
暫無相關文章
最熱文章:
新手怎么制作網頁? 閱讀:7660
jcarousellite中文文檔 閱讀:6507
表單元素input、按鈕、文字完美垂 閱讀:6247
怎么使chrome(谷歌google 閱讀:6145
phpMailer中文文檔手冊 閱讀:4639
網頁對話 0871-63215311
新疆时时下载手机版 游戏中心靠什么赚钱 江苏十一选五走势图十 福建36选7各种走势图 pk10开奖直播 国外赚钱交税了回国要交税 电玩城捕鱼 心悦吉林麻将安卓下载安装 梦幻手游洗宠物怎么赚钱吗 qq三国怎么刷东西赚钱 各种扑克牌的玩法 3d稳赚技巧 赚钱才不会自卑的说说 松江一道搓麻将app 彩票天天乐是黑平台吗 腾讯德州扑克怎么没了 快乐十分app下载