* { padding:0; margin:0; } body { background: #454545; } .main { width: 500px; margin:50px auto; } .main img { width: 500px; position: absolute; left: 450px; top: 50px; } .img_box { overflow: hidden; position: absolute; top:0px; left: 0px; z-index: 2; } .outer { overflow: hidden; background: #000; opacity: 0.4; position: absolute; top:0px; left: 0px; z-index: 0; } .box_border1 , .box_border2 , .box_border3 , .box_border4 { opacity: 0.5; } .box_border1 { background: url(./images/border-anim-v.gif) repeat-y left top; } .box_border2 { background: url(./images/border-anim-h.gif) repeat-x left top; } .box_border3 { background: url(./images/border-anim-v.gif) repeat-y right top; } .box_border4 { background: url(./images/border-anim-h.gif) repeat-x right bottom; } .box_handle { background: #fff; border: 1px solid #000; opacity: 0.5; } .confrim { width: 80px; height: 35px; }
布局效果如下：
通用函数
完成图片裁剪，通过上述原理，可以知道需要大量获取标签对象以及标签的css属性等，所以可以编写通用函数，更好的获取这些值。如下：
Dom获取函数
/* 仿JqueryDom获取 */ function $(dom) { function getDom(dom) { var str = dom.charAt(0); switch( str ) { case '.' : this.ele = document.getElementsByClassName(dom.substring(1))||null; break; case '#' : this.ele = document.getElementById(dom.substring(1)) || null; break; default : if(document.getElementsByTagName(dom).length) { this.ele = document.getElementsByTagName(dom); } else if(document.getElementsByName(dom).length) { this.ele = document.getElementsByName(dom); } else { this.ele = null; } } return this; }; getDom.prototype.get = function(num) { return this.ele[num]||this.ele; } getDom.prototype.insert = function(value , num) { this.ele[num].innerHTML = value; } return new getDom(dom); }
Css属性获取函数
Css属性的获取分成两种，一种是IE的，使用currentStyle；另一种是其他主流浏览器，使用getComputedStyle，以下是兼容版本：
/* Css获取 */ function getCss(o , key){ return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; };
赋值函数
编写时经常遇到对Dom的样式进行赋值，为方便，我专门编写了一个函数用于赋值：
/** - 赋值函数 - @param : obj 被赋值对象 - @param : option 进行的操作 - @parma : value 赋值内容 */ function setAssign(obj , option , value) { switch(option) { case 'width': obj.style.width = value; break; case 'height': obj.style.height = value; break; case 'top': obj.style.top = value; break; case 'left': obj.style.left = value; break; case 'position': obj.style.position = value; break; case 'cursor': obj.style.cursor = value; } }
好了准备工作基本完成，现在就正式开始编写。
通过点击与移动事件完成裁剪区域绘制
对图片设置mousedown以及mousemove事件监视，如下：
// 鼠标点击图片触发 oPicture.onmousedown = function(ev) { // 事件对象 var oEvent = ev || window.event; // 初始鼠标位置 var tempX = oEvent.clientX; var tempY = oEvent.clientY; // 调整裁剪区域位置 oTailor.style.left = oEvent.clientX + 'px'; oTailor.style.top = oEvent.clientY + 'px'; // 鼠标在图片上移动 绘制裁剪区域 阴影区域 document.onmousemove = function(ev) { // 鼠标移动事件对象 var oEvent = ev || window.event; // 当前鼠标位置减去鼠标之前的鼠标位置 等于 鼠标移动距离 var sLeft = oEvent.clientX - tempX; var sTop = oEvent.clientY - tempY; // 裁剪越界限制 只需限制右侧 与 下侧 if((oTailor.offsetLeft+oTailor.offsetWidth) >= (oPicture.offsetLeft+oPicture.offsetWidth)) { sLeft = oPicture.offsetLeft+oPicture.offsetWidth - oTailor.offsetLeft; } if((oTailor.offsetTop+oTailor.offsetHeight) >= (oPicture.offsetTop+oPicture.offsetHeight)) { sTop = oPicture.offsetTop+oPicture.offsetHeight - oTailor.offsetTop; } // 裁剪区域绘制 oTailor.style.width = sLeft + 'px'; oTailor.style.height = sTop + 'px'; // 裁剪区域显示 oTailor.style.display = 'block'; // 阴影区域显示 for (var i = 0; i < oShadow.length; i++) { oShadow[i].style.display = 'block'; } // 阴影区域绘制 shadow(oPicture , oTailor , oShadow); // 添加裁剪边框 tailorBorder(oDiv , oHandle , oTailor); // 阻止默认事件 oEvent.preventDefault(); }; // 鼠标松开 将移动事件取消 document.onmouseup = function(ev) { var oEvent = ev || window.event; // 移动事件取消 document.onmousemove = null; // 阻止默认事件 oEvent.preventDefault(); }; // 阻止默认事件 oEvent.preventDefault(); }
阴影区域绘制