©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
1、 本文实例为大家分享了全屏js头像上传插件源码，供大家参考，具体内容如下 index.html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>ccp</title> <link href="Content/ccp.css" rel=
2、"stylesheet" /> <script src="Scripts/cxc.js"></script> <script src="Scripts/ccp.js"></script> <script src="Scripts/fun.js"></script> </head> <body> <div id="SelectP
3、icture">选 择 图 片</div> <div id="pre"> <div id="prea"> <div id="ctna"> <img id="imga"/> </div> </div&
4、gt; <div id="preb"> <div id="ctnb"> <img id="imgb"/> </div> </div> <div id="prec">
5、 <div id="ctnc"> <img id="imgc"/> </div> </div> </div> <div id="ccp"> <div id="ctn">
6、 <img id="fixed_img" /> <div id="varied_div"> <img id="varied_div_img" /> <i id="TopLeft"></i> <i id="TopRight"
7、gt;</i> <i id="BottomRight"></i> <i id="BottomLeft"></i> </div> </div> <div id="black_cover"></div
8、gt; </div> <div id="bt"> <div id="Y_OUT"> <div id="Y">Y</div> </div> <div id="N_OUT"> <div id
9、"N">N</div> </div> </div> </body> </html> cxc.js /* cxc.js 频繁操作公共接口 */ var $ = function (id) { return document.getElementById(id); }; //通过id获取dom对象 var A = func
10、tion (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空方法 var setL = function (dom, L) { dom.style.left = L + "px"; }; // 设置 dom 的 left var setT = function (dom, T) {
11、nbsp; 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 [pa
12、rseInt(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 +
13、"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.sty
14、le.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"; d
15、om.style.height = H + "px"; }; //同时设置 dom 的 left top width height var setRTWH = function (dom, R, T, W, H) { dom.style.right = R + "px"; dom.style.top = T + "px"; dom.style.width = W + "px"; dom.style.height = H
16、 "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,
17、int,int] var setcursor = function (dom,shape) { dom.style.cursor = shape; }; //设置鼠标经过dom的指针形状 var EventsType = {//事件类型 click:"click", mousedown:"mousedown", mouseup:"mouseup", mouseover:"mouseo
18、ver", mouseleave:"mouseleave", mousemove:"mousemove", DOMContentLoaded:"DOMContentLoaded", }; var AddEvent = function (dom, type, fun) { dom.addEventListener(type, fun, false); }; //添加dom对象的事件监听方法
19、 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) {&nb
20、sp; 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,
21、 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
22、 (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
23、 arr) { for (var i = 0; i < arr.length; i++) { if (str == arr[i]) { return true; } } return false; }; // 判断字符串str是否存在于数组arr var cannotselect = function ()
24、 { window.getSelection().removeAllRanges(); }; //页面元素（文字、图片等）不能被选中 var setStyle = function (dom, styleName, styleValue) { dom.setAttribute("style", styleName + ":" + styleValue + ";"); }; //设置dom的 一个style 属性值 var setStyle2 = f
25、unction (dom, styleName1, styleValue1, styleName2, styleValue2) { dom.setAttribute("style", styleName1 + ":" + styleValue1 + ";" + styleName2 + ":" + styleValue2 + ";"); };//一次设置dom的 两个style 属性值 var delStyle = function (dom, styleName) { dom.removeAt
26、tribute("style", styleName); };//删除dom的 一个style 属性值 var delStyle2 = function (dom, styleName1, styleName2) { dom.removeAttribute("style", styleName1); dom.removeAttribute("style", styleName2); };//一次删除dom的 两个style 属性值 var setAttr
27、 function (dom, attrName, attrValue) { dom.setAttribute(attrName, attrValue); };// 设置dom的 一个属性值 var setAttr2 = function (dom, attrName1, attrValue1, attrName2, attrValue2) { dom.setAttribute(attrName1, attrValue1); dom.setAttribute(a
28、ttrName2, attrValue2); };//一次设置dom的 两个属性值 var delAttr = function (dom, attrName) { dom.removeAttribute(attrName); };//删除dom的 一个属性值 var delAttr2 = function (dom, attrName1, attrName2) { dom.removeAttribute(attrName1);
29、 dom.removeAttribute(attrName2); };//删除dom 的两个属性值 var Hide = function (dom) { dom.style.display = "none"; };// 隐藏dom var Hide3 = function (dom1,dom2,dom3) { dom1.style.display = "none"; dom2.style.display = "no
30、ne"; dom3.style.display = "none"; };// 隐藏3个dom var Show = function (dom) { dom.style.display = "inline"; }; // 显示dom var Show3 = function (dom1, dom2, dom3) { dom1.style.display = "inline"; dom2
31、style.display = "inline"; dom3.style.display = "inline"; };// 显示3个dom /* cxc.js 频繁操作公共接口 */ /* AJAX 接口 */ var url, method, msg; var xmlReq = new XMLHttpRequest(); var AJAX = function (url, method, msg, callback) { xmlRe
32、q.open(method, url, true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlReq.onreadystatechange = function () { if (xmlReq.readyState == 4) { if (xmlReq.status == 200) { &
33、nbsp; callback(); } else { A("ajax status is " + xmlReq.status); } } }; xmlReq.send(msg);
34、 }; /* AJAX 接口 */ /* 入口 */ var start = function (fun) { var begin = function () { DelEvent(document, EventsType.DOMContentLoaded, begin); fun(); }; AddEvent(document, EventsType.DOMContentLo
35、aded, begin); }; /* 入口 */ /* 环境 */ var screenW = window.innerWidth; var screenH = window.innerHeight; /* 环境 */ ccp.js var cfg = { imgtype: ["image/jpeg", "image/png", "image/gif", "image/bmp"], imgsize: 5 * 1024 * 1024,&
36、nbsp; varied_divMIN: 50, varied_divDEFAULT: 100, needWH:0, }; var dom = { body: null, SelectPicture: null, upfile: null, pre: null, ccp: null, b
37、t: null, prea: null, preb: null, prec: null, ctna: null, ctnb: null, ctnc: null, imga: null, imgb: null, imgc: null, Y_OUT: null, &
38、nbsp; N_OUT: null, Y: null, N: null, ctn: null, black_cover: null, fixed_img: null, varied_div: null, varied_div_img: null, TopLeft: null, TopRight: null,&n
39、bsp; BottomRight: null, BottomLeft: null, }; var ccp = { SelectPictureW: null, SelectPictureH: null, SelectPictureP1: 9, SelectPictureP2: 4, SelectPictureL: null, &nbs
40、p; SelectPictureT: null, SelectPictureFontSize: null, /////////////////////////// file: null, imgtype: null, imgsize: null, /////////////////////////// imgW: null, imgH: nu
41、ll, imgN: null, imgURL: null, ////////////////////////// preW: null, preH: null, ccpW: null, ccpH: null, btW: null, btH: null, /////////////
42、//////////// pre4: null, preaL: null, preaT: null, preaWH: null, prebL: null, prebT: null, prebWH: null, precL: null, precT: null, precWH: n
43、ull, ctnLT: 3, ctnaWH: null, ctnbWH: null, ctncWH: null, ////////////////////////// YN3: null, YN_OUTWH: null, YNWH: null, YN_OUTR: null, Y_
44、OUTT: null, N_OUTT: null, YNLT1: 25, YNLT2: 20, ////////////////////////// ctnL: null, ctnT: null, black_coverL: null, black_coverT: null, /////////////////
45、//////// varied_divL: null, varied_divT: null, varied_divWH: null, varied_divMaxL: null, varied_divMaxT: null, varied_div_imgWH: null, varied_div_imgL: null, varied_div_img
46、T: null, ///////////////////////// imgaW: null, imgaH: null, imgaL: null, imgaT: null, imgbW: null, imgbH: null, imgbL: null, imgbT: null, i
47、mgcW: null, imgcH: null, imgcL: null, imgcT: null, ///////////////////////// }; var GET_DOM = function () { dom.body = document.body; dom.pre = $("pre"); dom.ccp = $("ccp
48、"); dom.bt = $("bt"); dom.SelectPicture = $("SelectPicture"); dom.prea = $("prea"); dom.preb = $("preb"); dom.prec = $("prec"); dom.ctna = $("ctna"); dom.ctnb = $("ctnb");
49、dom.ctnc = $("ctnc"); dom.imga = $("imga"); dom.imgb = $("imgb"); dom.imgc = $("imgc"); dom.Y_OUT = $("Y_OUT"); dom.N_OUT = $("N_OUT"); dom.Y = $("Y"); dom.N = $("N"); dom.
50、ctn = $("ctn"); dom.black_cover = $("black_cover"); dom.fixed_img = $("fixed_img"); dom.varied_div = $("varied_div"); dom.varied_div_img = $("varied_div_img"); dom.TopLeft = $("TopLeft"); dom.TopRi
©2010-2026 宁波自信网络信息技术有限公司 版权所有
客服电话：0574-28810668 投诉电话：18658249818
浙ICP备2021020529号-1 | 浙B2-20240490
关注我们 ：
