js jquery melaksanakan fungsi pemangkasan imej_jquery

Kini apabila kami menggunakan pusat peribadi laman web utama, kami mempunyai fungsi untuk memuat naik avatar peribadi. Selepas pengguna memuat naik foto peribadi, ia mungkin tidak memenuhi keperluan tapak web, jadi pengguna diminta untuk memangkas foto, dan akhirnya avatar dijana berdasarkan saiz potong pengguna. Fungsi ini sangat hebat Apabila saya tidak memahami js, ia berasa menakjubkan, sangat menakjubkan. Saya fikir suatu hari nanti saya boleh memahami teknologi di dalam, betapa hebatnya~ Adakah anda semua mempunyai pemikiran yang sama seperti saya~ Haha~~

Mari gunakan javascript untuk melaksanakan fungsi ini.

Salin kod Kod adalah seperti berikut:

http://www.w3.org/1999/xhtml">

 

使用方法

    

$("#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({
    Höhe: Höhe,
    Breite: Breite,
    „Hintergrundposition“: „-“ links „-“ oben
   });
   this.tips.html("left:" parseInt(left) "top:" parseInt(top) "width:" width " height:" height "");
  },
  Start: Funktion(e){      
   var $elem     = $(e.target),
    block     = this.block,
    self      = dies,
    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[Aktion];    
   }else{
    this.x = e.clientX - this.offset.left - this.blockOriginal.left ;
    this.y = e.clientY - this.offset.top - this.blockOriginal.top;
    move = true;
   }   
   dh
    &&this.block[0].setCapture();
   this.tips.show();
   $(Dokument)
    .bind("mousemove.r",function(e){self.move(e,move)})
    .bind("mouseup.r",function(){self.end()});   
  },
  end  : function(){
   $(Dokument)
    .unbind("mousemove.r")
    .unbind("mouseup.r");
   dh 
    &&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();
  },
  unten: Funktion(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: Funktion(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};
  },
  links: Funktion(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};
  },
  rechts: Funktion(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: Funktion(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;
   zurück {
    left   : parseInt(block.css("left")),
    top    : parseInt(block.css("top")),
    Breite: block.width(),
    Höhe: block.height()
   }
  }
 }
 $.fn.clip = function(options){
  options.container = this;
  neuen Clip zurückgeben (Optionen);
 }
})();
 xx = $("#container").clip({
  imgC: $("#imgC")
 })

是不是很炫酷啊，小伙伴们，学学本示例的思路吧.