本文实例为大家分享了JavaScript头像上传插件源码，供大家参考，具体内容如下
效果图：
源码：
cxc.js
/* cxc.js 频繁操作公共接口 */ var $ = function (id) { return document.getElementById(id); }; //通过id获取dom对象 var A = function (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空方法 var setL = function (dom, L) { dom.style.left = L + "px"; }; // 设置 dom 的 left var setT = function (dom, T) { dom.style.top = T + "px"; }; // 设置 dom 的 top var setLT = function (dom, L, T) { dom.style.left = L + "px"; dom.style.top = T + "px"; }; //同时设置 dom 的 left top var getLT = function (dom) { return [parseInt(dom.style.left), parseInt(dom.style.top)]; }; // 返回dom的left和top值，类型为整型数组[int,int] var setW = function (W) { dom.style.width = W + "px"; }; // 设置 dom 的 width var setH = function (H) { dom.style.height = H + "px"; }; // 设置 dom 的 height var setWH = function (dom, W, H) { dom.style.width = W + "px"; dom.style.height = H + "px"; }; //同时设置 dom 的 width height var getWH = function (dom) { return [parseInt(dom.style.width), parseInt(dom.style.height)]; }; // 返回dom的 width 和 height 值，类型为整型数组[int,int] var setLTWH = function (dom, L, T, W, H) { dom.style.left = L + "px"; dom.style.top = T + "px"; dom.style.width = W + "px"; dom.style.height = H + "px"; }; //同时设置 dom 的 left top width height var getLTWH = function (dom) { return [parseInt(dom.style.left), parseInt(dom.style.top), parseInt(dom.style.width), parseInt(dom.style.height)] }; // 返回dom的 left top width height 值，类型为整型数组[int,int,int,int] var setcursor = function (dom,shape) { dom.style.cursor = shape; }; //设置鼠标经过dom的指针形状 var EventsType = ["click", "mousedown", "mouseup", "mouseover", "mouseleave", "mousemove"];//事件类型 var AddEvent = function (dom, type, fun) { dom.addEventListener(type, fun, false); }; //添加dom对象的事件监听方法 var AddEvent2 = function (dom, type1, fun1, type2, fun2) { dom.addEventListener(type1, fun1, false); dom.addEventListener(type2, fun2, false); }; //一次添加dom的两个事件监听方法 var AddEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) { dom.addEventListener(type1, fun1, false); dom.addEventListener(type2, fun2, false); dom.addEventListener(type3, fun3, false); }; //一次添加dom的三个事件监听方法 var DelEvent = function (dom, type, fun) { dom.removeEventListener(type, fun, false); }; // 删除dom对象的事件监听方法 var DelEvent2 = function (dom, type1, fun1, type2, fun2) { dom.removeEventListener(type1, fun1, false); dom.removeEventListener(type2, fun2, false); }; //一次删除dom对象的两个事件监听方法 var DelEvent3 = function (dom, type1, fun1, type2, fun2, type3, fun3) { dom.removeEventListener(type1, fun1, false); dom.removeEventListener(type2, fun2, false); dom.removeEventListener(type3, fun3, false); }; //一次删除dom对象的三个事件监听方法 var inArray = function (str, arr) { for (var i = 0; i < arr.length; i++) { if (str == arr[i]) { return true; } } return false; }; // 判断字符串str是否存在于数组arr var cannotselect = function () { window.getSelection().removeAllRanges(); }; //页面元素（文字、图片等）不能被选中 var setStyle = function (dom, styleName, styleValue) { dom.setAttribute("style", styleName + ":" + styleValue + ";"); }; //设置dom的 一个style 属性值 var setStyle2 = function (dom, styleName1, styleValue1, styleName2, styleValue2) { dom.setAttribute("style", styleName1 + ":" + styleValue1 + ";" + styleName2 + ":" + styleValue2 + ";"); };//一次设置dom的 两个style 属性值 var delStyle = function (dom, styleName) { dom.removeAttribute("style", styleName); };//删除dom的 一个style 属性值 var delStyle2 = function (dom, styleName1, styleName2) { dom.removeAttribute("style", styleName1); dom.removeAttribute("style", styleName2); };//一次删除dom的 两个style 属性值 var setAttr = function (dom, attrName, attrValue) { dom.setAttribute(attrName, attrValue); };// 设置dom的 一个属性值 var setAttr2 = function (dom, attrName1, attrValue1, attrName2, attrValue2) { dom.setAttribute(attrName1, attrValue1); dom.setAttribute(attrName2, attrValue2); };//一次设置dom的 两个属性值 var delAttr = function (dom, attrName) { dom.removeAttribute(attrName); };//删除dom的 一个属性值 var delAttr2 = function (dom, attrName1, attrName2) { dom.removeAttribute(attrName1); dom.removeAttribute(attrName2); };//删除dom 的两个属性值 var Click = function (dom) { dom.click(); };// 点击dom var Hide = function (dom) { dom.style.display = "none"; };// 隐藏dom var Show = function (dom) { dom.style.display = "inline"; }; // 显示dom /* cxc.js 频繁操作公共接口 */ /* AJAX 接口 */ var url, method, msg; var xmlReq = new XMLHttpRequest(); var AJAX = function (url, method, msg, callback) { xmlReq.open(method, url, true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange = function () { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { callback(); } else { A("bad status is " + xmlReq.status); } } }; xmlReq.send(msg); }; /* AJAX 接口 */
one.js
/* one.js */ /* my website philosophy */ /* 注：一般网站，浏览器最大化时，没有横向滚动条，有纵向滚动条，页面缩放按比例只在合适的地方用到 <html>标签 不必加css和js控制 <body>标签 作为总父标签 用它控制整个页面的宽度和高度 <body>的宽度 一般为100%(考虑滚动条存在与否) 而高度可根据页面需求自定义 也就是说body的宽高就是页面的宽高 页面高度如果超出 浏览器窗口高度 出现滚动条 */ var one = { screenW: null, //可用浏览器窗口的宽度 screenH: null, //可用浏览器窗口的高度 body: null, //document.body对象 bodyW: null, //body的宽度 bodyH: null, //body的高度 avatar: null, //默认头像div avatar_img:null, main: null, //处理上传图片的主要父div mainW: 430, //main的宽度 mainH:400, //main的高度 mainL: null, //main 的left位置 mainT:null, //main 的top位置 top: null, upfile:null, center:null, bigimg: null, movebox: null, moveimg: null, d11: null, d22: null, d33: null, TopLeft: null, TopRight: null, BottomRight: null, BottomLeft: null, p2: null, p3:null }; var Init = function () { ////////////////////////////////////////////////////////////////// one.screenW = window.innerWidth; one.screenH = window.innerHeight; one.body = document.body; one.bodyW = one.body.offsetWidth; one.bodyH = one.screenH; //定义body的高度等于可用浏览器窗口的高度 one.body.setAttribute("style", "height:" + one.bodyH + "px;"); ////////////////////////////////////////////////////////////////// one.avatar = $("avatar"); one.avatar_img = $("avatar_img"); one.main = $("main"); one.mainL = (one.bodyW - one.mainW) / 2; one.mainT = (one.screenH - one.mainH) / 2; /////////////////////////////////////////////////////////// one.top = $("top"); one.center = $("center"); one.bigimg = $("bigimg"); one.movebox = $("movebox"); one.moveimg = $("moveimg"); one.d11 = $("d11"); one.d22 = $("d22"); one.d33 = $("d33"); /////////////////////////////////////////////////////////// one.TopLeft = $("TopLeft"); one.TopRight = $("TopRight"); one.BottomRight = $("BottomRight"); one.BottomLeft = $("BottomLeft"); /////////////////////////////////////////////////////////// one.p2 = $("p2"); one.p3 = $("p3"); /////////////////////////////////////////////////////////// setLT(one.main, one.mainL, one.mainT); Hide(one.main); }; var End = function () { }; window.onload = function () { Init(); //初始化，获取页面上所有需要处理的标签对象，并赋初始值 Events(); //定义页面中的所有事件 End(); //js文件加载完成之后的处理工作 };//dom元素全部加载完成，执行此方法
Events.js
var downX, downY, oldL, oldT, tempWH, tempL, tempT, dxMax,tempMaxL,tempMaxT; var file, imgtype, imgsize, imgW, imgH, imgP, imgURL; var bigimgL, bigimgT; var moveboxWH, moveboxL, moveboxT, moveboxMinL, moveboxMinT, moveboxMaxL, moveboxMaxT; var moveimgL, moveimgT; var topL, topT; var gen = { _moveboxWH:null, _moveboxL: null, _moveboxT: null, }; /* one.avatar Events start */ var avatar_click = function () { one.upfile = document.createElement("input"); setAttr2(one.upfile, "type", "file", "id", "upfile"); this.parentNode.appendChild(one.upfile); Click(one.upfile); one.upfile.onchange = function () { file = this.files[0]; imgtype = file.type; if (!fun.check_imgtype()) { return; } //检查文件类型 imgsize = file.size; if (!fun.check_imgsize()) { return; }; //检查图片大小 var reader = new FileReader(); reader.onload = function () { fun.setImgWH(this.result, imgtype); delete (reader); }; reader.readAsDataURL(file); /////////////////////////// this.parentNode.removeChild(one.upfile); }; }; var avatar_mouseover = function () { setStyle2(one.avatar, "border", "2px solid #46AFDC", "box-shadow", "0 0 5px #46AFDC"); }; var avatar_mouseleave = function () { delStyle2(one.avatar, "border", "box-shadow"); }; /* one.avatar Events end */ /* one.top Events start */ var topLimit = function () { if (topL < 0) topL = 1; else if (topL > one.bodyW - 432) topL = one.bodyW - 432 - 1; if (topT < 0) topT = 1; else if (topT > one.screenH - 402) topT = one.screenH - 402 - 1; }; var top_mousedown = function (e) { if (e.button > 0) { top_mouseup(); return false; } downX = e.clientX; downY = e.clientY; oldL = one.main.offsetLeft; oldT = one.main.offsetTop; AddEvent2(document, EventsType[2], top_mouseup, EventsType[5], doc_top_mousemove); }; var doc_top_mousemove = function (e) { topL = oldL + e.clientX - downX; topT = oldT + e.clientY - downY; topLimit(); setLT(one.main, topL, topT); }; var top_mouseup = function () { DelEvent2(document, EventsType[2], top_mouseup, EventsType[5], doc_top_mousemove); }; /* one.top Events end */ /* one.movebox Events start */ var moveboxLimit = function () { if (moveboxL <= moveboxMinL) moveboxL = moveboxMinL; else if (moveboxL >= moveboxMaxL) moveboxL = moveboxMaxL; if (moveboxT <= moveboxMinT) moveboxT = moveboxMinT; else if (moveboxT > moveboxMaxT) moveboxT = moveboxMaxT; }; var movebox_mousedown = function (e) { if (e.button > 0) { movebox_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = moveboxL; oldT = moveboxT; AddEvent2(document, EventsType[2], movebox_mouseup, EventsType[5], doc_movebox_mousemove); }; var doc_movebox_mousemove = function (e) { moveboxL = oldL + e.clientX - downX; moveboxT = oldT + e.clientY - downY; moveboxLimit(); setLT(one.movebox, moveboxL, moveboxT); fun.setimg(); fun.set_dxx(); }; var movebox_mouseup = function () { DelEvent2(document, EventsType[2], movebox_mouseup, EventsType[5], doc_movebox_mousemove); }; /* one.movebox Events end */ /* 拉伸事件开始 */ var TopLeft_mousedown = function (e) { if (e.button > 0) { TopLeft_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = moveboxL; oldT = moveboxL; tempWH = moveboxWH; tempL = moveboxL - bigimgL; tempT = moveboxT - bigimgT; tempMaxL = moveboxMaxL; tempMaxT = moveboxMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType[2], TopLeft_mouseup, EventsType[5], doc_TopLeft_mousemove); }; var doc_TopLeft_mousemove = function (e) { movebox_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx < 0 && Math.abs(dx) > dxMax) { dx = -dxMax; } else if (dx > 0 && dx > tempWH - pic.pwh_min) { dx = tempWH - pic.pwh_min; } moveboxMaxL = tempMaxL + dx; moveboxMaxT = tempMaxT + dx; moveboxL = oldL + dx; moveboxT = oldT + dx; moveboxWH = tempWH - dx; setLT(one.movebox, moveboxL, moveboxT); setWH(one.movebox, moveboxWH , moveboxWH); fun.setimg(); fun.set_dxx(); }; var TopLeft_mouseup = function () { DelEvent2(document, EventsType[2], TopLeft_mouseup, EventsType[5], doc_TopLeft_mousemove); }; var TopRight_mousedown = function (e) { if (e.button > 0) { TopRight_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = moveboxL; oldT = moveboxL; tempWH = moveboxWH; tempL = imgW - (moveboxL - bigimgL) - moveboxWH; tempT = moveboxT - bigimgT; tempMaxL = moveboxMaxL; tempMaxT = moveboxMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType[2], TopRight_mouseup, EventsType[5], doc_TopRight_mousemove); }; var doc_TopRight_mousemove = function (e) { movebox_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx < 0 && Math.abs(dx) > dxMax) { dx = -dxMax; } else if (dx > 0 && dx > tempWH - pic.pwh_min) { dx = tempWH - pic.pwh_min; } moveboxMaxL = tempMaxL + dx; moveboxMaxT = tempMaxT + dx; moveboxL = oldL; moveboxT = oldT + dx; moveboxWH = tempWH - dx; setLT(one.movebox, moveboxL, moveboxT); setWH(one.movebox, moveboxWH, moveboxWH); fun.setimg(); fun.set_dxx(); }; var TopRight_mouseup = function () { DelEvent2(document, EventsType[2], TopRight_mouseup, EventsType[5], doc_TopRight_mousemove); }; var BottomRight_mousedown = function (e) { if (e.button > 0) { BottomRight_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = moveboxL; oldT = moveboxL; tempWH = moveboxWH; tempL = imgW - (moveboxL - bigimgL) - moveboxWH; tempT = imgH - (moveboxT - bigimgT) - moveboxWH; tempMaxL = moveboxMaxL; tempMaxT = moveboxMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType[2], BottomRight_mouseup, EventsType[5], doc_BottomRight_mousemove); }; var doc_BottomRight_mousemove = function (e) { movebox_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx > 0 && dx > dxMax) { dx = dxMax; } else if (dx < 0 && Math.abs(dx) > tempWH - pic.pwh_min) { dx = -(tempWH - pic.pwh_min); } moveboxMaxL = tempMaxL - dx; moveboxMaxT = tempMaxT - dx; moveboxL = oldL; moveboxT = oldT; moveboxWH = tempWH + dx; setLT(one.movebox, moveboxL, moveboxT); setWH(one.movebox, moveboxWH, moveboxWH); fun.setimg(); fun.set_dxx(); }; var BottomRight_mouseup = function () { DelEvent2(document, EventsType[2], BottomRight_mouseup, EventsType[5], doc_BottomRight_mousemove); }; var BottomLeft_mousedown = function (e) { if (e.button > 0) { BottomLeft_mouseup(); return false; } e.preventDefault && e.preventDefault(); downX = e.clientX; downY = e.clientY; oldL = moveboxL; oldT = moveboxL; tempWH = moveboxWH; tempL = moveboxL - bigimgL; tempT = imgH - (moveboxT - bigimgT) - moveboxWH; tempMaxL = moveboxMaxL; tempMaxT = moveboxMaxT; dxMax = tempL >= tempT ? tempT : tempL; AddEvent2(document, EventsType[2], BottomLeft_mouseup, EventsType[5], doc_BottomLeft_mousemove); }; var doc_BottomLeft_mousemove = function (e) { movebox_mouseup();//移动事件屏蔽，非常重要 var dx = e.clientY - downY; if (dx > 0 && dx > dxMax) { dx = dxMax; } else if (dx < 0 && Math.abs(dx) > tempWH - pic.pwh_min) { dx = -(tempWH - pic.pwh_min); } moveboxMaxL = tempMaxL - dx; moveboxMaxT = tempMaxT - dx; moveboxL = oldL - dx; moveboxT = oldT; moveboxWH = tempWH + dx; setLT(one.movebox, moveboxL, moveboxT); setWH(one.movebox, moveboxWH, moveboxWH); fun.setimg(); fun.set_dxx(); }; var BottomLeft_mouseup = function () { DelEvent2(document, EventsType[2], BottomLeft_mouseup, EventsType[5], doc_BottomLeft_mousemove); }; /* 拉伸事件结束 */ /* 两个按钮事件开始 */ var callback = function () { var txt = xmlReq.responseText; one.avatar_img.src = "../saveimg/"+txt; Hide(one.main); Show(one.avatar); }; var create_msg = function () { var msg = "moveboxL=" + (moveboxL - bigimgL) + "&moveboxT=" + (moveboxT - bigimgT) + "&moveboxWH=" + moveboxWH; msg += "&imgURL=" + imgURL; return msg; }; var p2_click = function () { url="../Avatar/AJAX_saveimg"; method = "post"; msg = create_msg(); AJAX(url, method, msg, callback); }; var p3_click = function () { Hide(one.main); Show(one.avatar); }; /* 两个按钮事件结束 */ var Events = function () { AddEvent3(one.avatar, EventsType[0], avatar_click, EventsType[3], avatar_mouseover, EventsType[4], avatar_mouseleave);//avatar AddEvent(one.top, EventsType[1], top_mousedown);//top AddEvent(one.movebox, EventsType[1], movebox_mousedown);//movebox AddEvent(one.TopLeft, EventsType[1], TopLeft_mousedown);//TopLeft AddEvent(one.TopRight, EventsType[1], TopRight_mousedown);//TopRight AddEvent(one.BottomRight, EventsType[1], BottomRight_mousedown);//BottomRight AddEvent(one.BottomLeft, EventsType[1], BottomLeft_mousedown);//BottomLeft AddEvent(one.p2, EventsType[0], p2_click);//p2 AddEvent(one.p3, EventsType[0], p3_click);//p3 /* =========================================== END =========================================== */ AddEvent(document, EventsType[5], cannotselect);//最后添加整个页面无法选中事件 };
def.js
var pic = { pwh_max: 299, //图片最大宽高 pwh_min: 30, //图片最小宽高 P:10/1, //图片宽高比 movediv_min: 30, //截框最小宽高 movediv_default: 100,//截框初始宽高 W_H: false, //宽大于高？ imgtype: ["image/jpeg", "image/png", "image/gif", "image/bmp"],//支持这4种类型图片 imgsize: 5 * 1024 * 1024, //最大5M d11WH: 119, d22WH: 99, d33WH: 71, URL:window.URL || window.webkitURL || window.mozURL || window.msURL || false, }; var fun = { FormBlob: function (dataURI) { var byteString, splits = false, splits1 = dataURI.replace(new RegExp("^data:.*base64,"), function () { splits = true; return ""; }); byteString = atob(splits1); var byteStringlength = byteString.length, ia = new Uint8Array(byteStringlength); for (var i = 0; i < byteStringlength; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: imgtype }); }, check_imgtype: function () { if (!inArray(imgtype, pic.imgtype)) { one.upfile.parentNode.removeChild(one.upfile); alert("请选择正确的图片类型"); return false; } else { return true;} }, check_imgsize: function () { if (imgsize > pic.imgsize) { this.parentNode.removeChild(this); alert("图片不能超过5M"); return false; } else { return true;} }, setImgWH: function (src,type) { var image = new Image(); image.onload = function () { var newcanvas = document.createElement("canvas"); newcanvas.style.display = "none"; var bodys = document.body; bodys.appendChild(newcanvas); var ctx = newcanvas.getContext("2d"); var width = this.width, height = this.height;//图片的宽高 var w, h; //选取图片的宽高 var cw, ch;//画布的宽高 var P = width / height; imgP = P; pic.W_H = width > height ? true : false; if (pic.W_H) { if (P >= 10) { ch = pic.pwh_min; cw = pic.pwh_max; h = height; w = h * pic.pwh_max / pic.pwh_min; } else { if (height <= pic.pwh_min) { ch = pic.pwh_min; cw = Math.round(ch * P); h = height; w = width; } else if (width >= pic.pwh_max) { cw = pic.pwh_max; ch = Math.round(cw / P); h = height; w = width; } else { cw = width; ch = height; h = height; w = width; } } } else { if (P <= 1 / 10) { cw = pic.pwh_min; ch = pic.pwh_max; w = width; h = w * pic.pwh_max / pic.pwh_min; } else { if (width <= pic.pwh_min) { cw = pic.pwh_min; ch = Math.round(cw / P); w = width; h = height; } else if (height >= pic.pwh_max) { ch = pic.pwh_max; cw = Math.round(ch * P); w = width; h = height; } else { cw = width; ch = height; h = height; w = width; } } } ///////////////////////////////////////////////////// imgW = newcanvas.width = cw; imgH = newcanvas.height = ch; ctx.fillStyle = "#FFFFFF"; ctx.fillRect(0, 0, cw, ch); ctx.drawImage(image, 0, 0, w, h, 0, 0,cw, ch); imgURL = newcanvas.toDataURL(type, 1); //imgURL = pic.URL.createObjectURL(fun.FormBlob(imgURL)); one.d11.src = one.d22.src = one.d33.src = one.bigimg.src = one.moveimg.src = imgURL; ctx.clearRect(0, 0, cw, ch); bodys.removeChild(newcanvas); delete DATA; delete image; fun.setStart(); }; image.onerror = function () { alert("图片已损坏，请上传正确图片"); }; image.src = src; }, setStart: function () { Hide(one.avatar); Show(one.main); fun.set_bigimg(); fun.set_movebox(); fun.set_dxx(); }, set_bigimg: function () { bigimgL = Math.round((pic.pwh_max - imgW) / 2); bigimgT = Math.round((pic.pwh_max - imgH) / 2); setLT(one.bigimg,bigimgL,bigimgT); }, set_movebox: function () { if (pic.W_H) { moveboxWH = imgH <= pic.movediv_default ? imgH : pic.movediv_default; } else { moveboxWH = imgW <= pic.movediv_default ? imgW : pic.movediv_default; } moveboxL = Math.round((pic.pwh_max - moveboxWH) / 2); moveboxT = Math.round((pic.pwh_max - moveboxWH) / 2); moveboxMinL = bigimgL; moveboxMinT = bigimgT; moveboxMaxL = Math.round(pic.pwh_max - moveboxWH - bigimgL); moveboxMaxT = Math.round(pic.pwh_max - moveboxWH - bigimgT); setLT(one.movebox, moveboxL, moveboxT); setWH(one.movebox, moveboxWH, moveboxWH); moveimgL = -Math.round((imgW - moveboxWH) / 2); moveimgT = -Math.round((imgH - moveboxWH) / 2); setLT(one.moveimg, moveimgL, moveimgT); }, set_dxx: function () { var P1 = pic.d11WH / moveboxWH; var P2 = pic.d22WH / moveboxWH; var P3 = pic.d33WH / moveboxWH; var d11W = Math.round(imgW * P1); var d22W = Math.round(imgW * P2); var d33W = Math.round(imgW * P3); var d11H = Math.round(imgH * P1); var d22H = Math.round(imgH * P2); var d33H = Math.round(imgH * P3); setWH(one.d11, d11W, d11H); setWH(one.d22, d22W, d22H); setWH(one.d33, d33W, d33H); var d11L = Math.round(moveimgL * P1); var d22L = Math.round(moveimgL * P2); var d33L = Math.round(moveimgL * P3); var d11T = Math.round(moveimgT * P1); var d22T = Math.round(moveimgT * P2); var d33T = Math.round(moveimgT * P3); setLT(one.d11, d11L, d11T); setLT(one.d22, d22L, d22T); setLT(one.d33, d33L, d33T); }, setimg: function () { moveimgL = bigimgL - one.movebox.offsetLeft; moveimgT = bigimgT - one.movebox.offsetTop; setLT(one.moveimg, moveimgL, moveimgT); }, };
Index.cshtml
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/one.js"></script> <script src="~/Scripts/Events.js"></script> <script src="~/Scripts/def.js"></script> <script src="~/Scripts/cxc.js"></script> <link href="~/Content/Avatar_Main.css" rel="stylesheet" /> <title>@ViewBag.Title</title> </head> <body> <div id="avatar"> <img id="avatar_img" src="~/Images/default_avatar.jpg" /> </div> <div id="main"> <div id="top"> <p id="p1"> 图 片 截 取 </p> </div> <div id="center"> <div id="movebox"> <i id="TopLeft"></i> <i id="TopRight"></i> <i id="BottomRight"></i> <i id="BottomLeft"></i> <img id="moveimg"/> </div> <div id="black"></div> <img id="bigimg"/> </div> <div id="d1"> <img id="d11"/> </div> <div id="d2"> <img id="d22"/> </div> <div id="d3"> <img id="d33"/> </div> <div id="bottom"> <p id="p2">就是它了</p> <p id="p3">暂且放弃</p> </div> </div> </body> </html>
Avatar_Main.css
body { margin:0px; padding:0px; background-color:#9C938F; } #avatar{ width:120px; height:120px; border:2px solid #FFFFFF; position:absolute; top:30px; left:8%; border-radius:7px; background-color:#ffffff; overflow:hidden; cursor:pointer; } #avatar_img{ width:120px; height:120px; } #upfile{ display:none; } #main{ position:absolute; width:430px; height:400px; background-color:#9C938F; border-bottom:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #635E5B; border-top:1px solid #635E5B; border-radius:8px; } #top,#center,#d1,#d2,#d3,#bottom{ position:absolute; border-bottom:1px solid #635E5B; border-right:1px solid #635E5B; border-left:1px solid #fff; border-top:1px solid #fff; background-color:#9C938F; border-radius:8px; } #top{ width:424px; height:43px; left:2px; top:2px; text-align: center; cursor:move; } #p1{ position:absolute; left:115px; top:-30px; font-size:30px; font-family:"微软雅黑"; color: #9C938F; font-weight:normal; text-shadow: -1px -1px white, 1.2px 1.2px #333333; } #center{ width:300px; height:300px; top:49px; left:2px; overflow:hidden; border-radius:0px; } #d1{ overflow:hidden; width:120px; height:120px; top:49px; right:2px; border-radius:0px; } #d2{ overflow:hidden; width:100px; height:100px; top:173px; right:2px; border-radius:0px; } #d3{ overflow:hidden; width:72px; height:72px; top:277px; right:2px; border-radius:0px; } #bottom{ width:424px; height:43px; left:2px; bottom:2px; } #p2,#p3{ position:absolute; width:100px; height:30px; font-size:22px; font-family:"微软雅黑"; color: #9C938F; font-weight:normal; text-shadow: -1px -1px white, 1.2px 1.2px #333333; } #p2:hover,#p3:hover{ cursor:pointer; color:#bbbbbb; } #p2{ top:-15px; left:200px; } #p3{ top:-15px; right:10px; } #bigimg{ position:absolute; } #black{ position:absolute; z-index:99; width:299px; height:299px; background-color:#000; opacity:0.6; } #movebox { position: absolute; z-index: 100; overflow: hidden; cursor:move; } #BottomRight,#TopRight,#TopLeft,#BottomLeft { background:#D6FB66; display:block; width:6px; height:6px; overflow:hidden; position:absolute; z-index:105; bottom:0; right:0; cursor:nw-resize; } #BottomLeft { bottom:0; left:0; cursor:ne-resize; } #TopRight { top:0; right:0; cursor:ne-resize; } #TopLeft { top:0; left:0; cursor:nw-resize; } #moveimg{ position:absolute; } #d11,#d22,#d33{ position:absolute; }
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。
【JavaScript头像上传插件源码分享】相关文章：