现在我们在使用各大网站的个人中心时，都有个上传个人头像的功能。用户在上传了个人照片之后，可能不符合网站的要求，于是要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。这个功能真是太棒了，原来不懂js的时候，感觉很神奇，太神奇了。心想哪天要是自己也能搞明白这里面的技术，那该多牛呀~大家是不是也有何我一样的想法呀~哈哈~~
下面我们就来用javascript来实现这个功能吧。
复制代码 代码如下:
http://www.w3.org/1999/xhtml>
clip
使用方法
$(#container).clip({
  imgc : $(#imgc),
        blockclass : block,
        tipsclass  : tips       
 });
imgc : 表示裁剪图片的容器,也就是右边的图
blockclass : block的样式名  也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名  默认是block
tipsclass  : tips的样式名   也就是页面上显示left width height top的那个span的样式名 默认是tips
>http://common.cnblogs.com/script/jquery.js>>
\
\
\
\
\
\
\
\
       ')
   .bind(mousedown.r,function(e){self.start(e)})
   .appendto(this.container[0]);
   this.tips = $('').appendto(this.container[0]);
   this.setimg();
  },
  setimg : function(){
   var block = this.block;
   var left  = block.css(left),
    top   = block.css(top),
    height = block.height(),
    width  = block.width();
   this.imgc.css({
    height: height,
    width : width,
    background-position : -+left+ -+top
   });
   this.tips.html(left:+parseint(left) + top: + +parseint(top) + width:+width+ height:+height+);
  },
  start : function(e){      
   var $elem     = $(e.target),
    block     = this.block,
    self      = this,
    move      = false,
    container = this.container,
    action    = $elem.attr(action);
   //这个 每次都要计算 基本dom结构的改变 浏览器的缩放 都会让里面的值发生改变 
   this.offset = $.extend({height:container.height(),width:container.width()},container.offset());
   this.blockoriginal = {height:block.height(),width:block.width(),left:parseint(block.css(left)),top:parseint(block.css(top))};
   if(action){
    this.fun = this[action];    
   }else{
    this.x = e.clientx - this.offset.left - this.blockoriginal.left ;
    this.y = e.clienty - this.offset.top - this.blockoriginal.top;
    move = true;
   }   
   ie
    &&this.block[0].setcapture();
   this.tips.show();
   $(document)
    .bind(mousemove.r,function(e){self.move(e,move)})
    .bind(mouseup.r,function(){self.end()});   
  },
  end  : function(){
   $(document)
    .unbind(mousemove.r)
    .unbind(mouseup.r);
   ie 
    &&this.block[0].releasecapture();
   this.tips.hide(); 
  },
  move : function(e,ismove){
   window.getselection
    ? window.getselection().removeallranges()
    : document.selection.empty();
var block = this.block; 
   if(ismove){
    var left = math.max(0,e.clientx - this.offset.left - this.x);
    left = math.min(left,this.offset.width - this.blockoriginal.width);
    var top = math.max(0,e.clienty - this.offset.top - this.y);
    top = math.min(top,this.offset.height - this.blockoriginal.height);
    block.css({left:left,top:top});    
   }else{
    var offset = this.fun(e);
    block.css(offset);
   }
this.setimg();
   this.movecallback();
  },
  down : function(e){
   var blockoriginal = this.blockoriginal,
    stop = math.max(dbody.scrolltop,ddoc.scrolltop), //出现垂直方向滚动条时候 要计算这个 
    offset = this.offset;
if(e.clienty-offset.top>=blockoriginal.top-stop){
    var height = math.min(offset.height - blockoriginal.top,e.clienty-offset.top-blockoriginal.top+stop),
     top = blockoriginal.top;
   }else{
    var height = math.min(offset.top+blockoriginal.top-e.clienty-stop,blockoriginal.top),
     top = math.max(e.clienty - offset.top+stop,0);
   }
   return {height:height, top:top};
  },
  up : function(e){
   var blockoriginal = this.blockoriginal,
    stop = math.max(dbody.scrolltop,ddoc.scrolltop),
    offset = this.offset;
   if(e.clienty-offset.top-blockoriginal.height    var top = math.max(e.clienty-offset.top+stop,0),
     maxheight = blockoriginal.top + blockoriginal.height,
     height = math.min(maxheight,blockoriginal.top + blockoriginal.height -(e.clienty-offset.top)-stop);     
   }else{
    var height = math.min(e.clienty-offset.top-blockoriginal.top-blockoriginal.height+stop,offset.height-blockoriginal.top-blockoriginal.height),
     top = blockoriginal.top+blockoriginal.height;  
   }
   return {height:height, top:top};
  },
  left : function(e){
   var blockoriginal = this.blockoriginal,
    offset = this.offset;
if(e.clientx - offset.left - blockoriginal.width - blockoriginal.left    var left  = math.max(e.clientx - offset.left,0),
     width = math.min(blockoriginal.left + blockoriginal.width,blockoriginal.left + blockoriginal.width -(e.clientx-offset.left));
   }else{
    var width = math.min(e.clientx-offset.left-blockoriginal.left-blockoriginal.width,offset.width-blockoriginal.left-blockoriginal.width),
     left  = blockoriginal.left + blockoriginal.width;
   }
   return {left : left,  width : width};
  },
  right : function(e){
   var blockoriginal = this.blockoriginal,
    offset = this.offset;
   if(e.clientx-offset.left>=blockoriginal.left){
    var width = math.min(offset.width - blockoriginal.left,e.clientx - offset.left - blockoriginal.left),
     left  = blockoriginal.left;
   }else{
    var width = math.min(offset.left + blockoriginal.left - e.clientx,blockoriginal.left),
     left  = math.max(e.clientx - offset.left,0);
   }
   return {left : left,  width : width};
  },
  rightdown : function(e){
   return $.extend(this.right(e),this.down(e));  
  },
  leftdown : function(e){
   return $.extend(this.left(e),this.down(e));
  },
  rightup : function(e){
   return $.extend(this.right(e),this.up(e));
  },
  leftup : function(e){
   return $.extend(this.left(e),this.up(e));
  },
  getvalue : function(){
   var block = this.block;
   return {
    left   : parseint(block.css(left)),
    top    : parseint(block.css(top)),
    width  : block.width(),
    height : block.height()
   }
  }
 }
 $.fn.clip = function(options){
  options.container = this;
  return new clip(options);
 }
})();
 xx = $(#container).clip({
  imgc : $(#imgc)
 })
是不是很炫酷啊，小伙伴们，学学本示例的思路吧。