js jquery melaksanakan fungsi pemangkasan imej

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 "> clip *{ padding:0; margin:0;} ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; } li{ float:left; width:500px;} #container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg );} #container .block{height:100px; width:100px; border:1px solid #000000; position:absolute; left:50px; top:50px; background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;} #container .tips{ position:absolute; padding:5px; border:1px solid #ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6; display:none; font-size:12px; color:#333; ;} .tips span{ display:inline-block;zoom:1; width:28px;} .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{ position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;} .rLeftDown,.rRightUp{cursor:ne-resize;} .rRightDown,.rLeftUp{cursor:nw-resize;} .rRight,.rLeft{cursor:e-resize;} .rUp,.rDown{cursor:n-resize;} .rRightDown{ bottom:-3px; right:-3px;} .rLeftDown{ bottom:-3px; left:-3px;} .rRightUp{ top:-3px; right:-3px;} .rLeftUp{ top:-3px; left:-3px;} .rRight{ right:-3px; top:50%} .rLeft{ left:-3px; top:50%} .rUp{ top:-3px; left:50%} .rDown{ bottom:-3px; left:50%} #imgC{ border:1px solid #CCC; width:0; height:0; margin:0 auto;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg );} .code { background: none repeat scroll 0 0 #E3F4F9; border: 1px solid #BAE2F0; font: 12px "Courier New",Courier,monospace; margin: 30px auto; padding: 10px 10px 40px; width:980px; } .code p{ height:24px; line-height:24px;} .code span{ display:inline-block;zoom:1; margin-right:5px; width:85px; font-weight:bold; color:#00F} 使用方法 $("#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"> > (function(){ var dBody = document.body, dDoc = document.documentElement, ie = $.browser.msie; ie&&($.browser.version=="6.0") &&document.execCommand("BackgroundImageCache", false, true); var clip = function(options){ this.init.call(this,options); } clip.prototype = { options :{ moveCallBack : function(){}, blockClass : "block", tipsClass : "tips" }, init : function(options){ $.extend(this,this.options,options||{}); if(!this.container || !this.imgC){ return; } this.container = $(this.container); var self = this; this.block = $(' \ \ \ \ \ \ \ \ \ ') .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") }) 是不是很炫酷啊，小伙伴们，学学本示例的思路吧.

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

js jquery melaksanakan fungsi pemangkasan imej_jquery