五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > [原創(chuàng)]圖片區(qū)域截取縮放插件 jQuery imgCut

[原創(chuàng)]圖片區(qū)域截取縮放插件 jQuery imgCut

文章來(lái)源：365jz.com     點(diǎn)擊數(shù)：1170    更新時(shí)間：2009-09-18 10:16   參與評(píng)論
結(jié)合這兩篇文章而寫(xiě)的
利用jQuery UI 實(shí)現(xiàn)圖片部份截取
利用jQuery UI 實(shí)現(xiàn)圖片局部放大

調(diào)用需求
<link type="text/css" href="redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.imgcut.js"></script>

調(diào)用
$(selector).imgCut(options);

選項(xiàng)
    top:0, //框框初始位置
    left:0,//框框初始位置
    width:100, //框框大小
    height:100,//框框大小
    imageWidth:400,//圖片寬度
    imageHeight:400,//圖片高度
    minHeight:30,//框框最小
    minWidth:30,//框框最小
    zoom:1,//縮放倍數(shù)
    border:{border:'solid 2px blue'},//框框CSS
    dragopts:{}, //拖動(dòng)選項(xiàng)，請(qǐng)參考jquery官方UI
    resizeopts:{}, //大小選項(xiàng)，請(qǐng)參考jquery官方UI
    idprox:'imgcut' //id前綴（當(dāng)一個(gè)頁(yè)面調(diào)用多次此UI時(shí)使用)
    src:"abc.jpg" //圖片
    obj:"#obj" //截取后的圖片存放處（為jquery的selector)

HTML
<div id='c'></div>
<div id='o' style='top:500px'></div>

范例
$("#c").imgCut({
    src:"1.jpg",
    imageWidth:732,//圖片大小
    imageHeight:458,//圖片大小
    zoom:2,//放大兩倍
    obj:"#o" //縮放后的selector
});

演示

下載

收藏與分享
Tag標(biāo)簽: jQueryUI

如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答！！ 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (1170人查看，0條評(píng)論)
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱(chēng)：
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢(xún)

· 技術(shù)支持
· 服務(wù)時(shí)間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)