<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
  <title>jcrop 圖片拖動(dòng)</title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="jquery.Jcrop.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="demos.css" type="text/css" />
 </head>
 <body>
 <div id="outer">
 <div class="jcExample">
 <div class="article">
  <h1>上傳頭像拖動(dòng)例子</h1>
  <table>
   <tr>
    <td>
     <img src="sago.jpg" id="target" alt="Flowers" />
    </td>
    <td>
     <div style="width:100px;height:100px;overflow:hidden;" id="aa">
      <img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" />
     </div>
    </td>
   </tr>
  </table>
 </div>
 </div>
 </div>
 </body>
<script type="text/javascript">
new cutImage().init();
function cutImage(){
  var oop = this;
  this.option = {
    x:170,
    y:110,
    w:350,
    h:200,
    t:'target',
    p:'preview',
    o:'aa'
  }
  this.init = function(){
    oop.target();
  }
  this.target = function(){
   $('#'+oop.option['t']).Jcrop({
     onChange: oop.updatePreview,
     onSelect: oop.updatePreview,
     aspectRatio: 1,
     setSelect: [ oop.option['x'], oop.option['y'], oop.option['w'],oop.option['h'] ],
     bgFade:   true,
     bgOpacity: .5
    });
  }
  this.updatePreview = function(obj){
    if (parseInt(obj.w) > 0)
    {
     var rx = $('#'+oop.option['o']).width()/ obj.w;
     var ry = $('#'+oop.option['o']).height()/ obj.h;
     $('#'+oop.option['p']).css({
      width: Math.round(rx*$('#'+oop.option['t']).width()) + 'px',
      height: Math.round(ry*$('#'+oop.option['t']).height()) + 'px',
      marginLeft: '-' + Math.round(rx * obj.x) + 'px',
      marginTop: '-' + Math.round(ry * obj.y) + 'px'
     });
    }
  }
}
</script>
</html>

jquery jcrop結(jié)合jquery ajax upload的話，可以使頭像上傳截取功能，很人性化。

完整實(shí)例代碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery插件相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: