本文實例為大家分享了全螢幕js頭像上傳插件原始碼，供大家參考，具體內容如下
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ccp</title>
<link href="Content/ccp.css" rel="stylesheet" />
<script src="Scripts/cxc.js"></script>
<script src="Scripts/ccp.js"></script>
<script src="Scripts/fun.js"></script>
</head>
<body>
<div id="SelectPicture">选 择 图 片</div>
<div id="pre">
<div id="prea">
<div id="ctna">
<img id="imga"/ alt="全螢幕js頭像上傳外掛程式原始碼高清版_javascript技巧" >
</div>
</div>
<div id="preb">
<div id="ctnb">
<img id="imgb"/ alt="全螢幕js頭像上傳外掛程式原始碼高清版_javascript技巧" >
</div>
</div>
<div id="prec">
<div id="ctnc">
<img id="imgc"/ alt="全螢幕js頭像上傳外掛程式原始碼高清版_javascript技巧" >
</div>
</div>
</div>
<div id="ccp">
<div id="ctn">
<img id="fixed_img" / alt="全螢幕js頭像上傳外掛程式原始碼高清版_javascript技巧" >
<div id="varied_div">
<img id="varied_div_img" / alt="全螢幕js頭像上傳外掛程式原始碼高清版_javascript技巧" >
<i id="TopLeft"></i>
<i id="TopRight"></i>
<i id="BottomRight"></i>
<i id="BottomLeft"></i>
</div>
</div>
<div id="black_cover"></div>
</div>
<div id="bt">
<div id="Y_OUT">
<div id="Y">Y</div>
</div>
<div id="N_OUT">
<div id="N">N</div>
</div>
</div>
</body>
</html>
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 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 + "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:"click",
mousedown:"mousedown",
mouseup:"mouseup",
mouseover:"mouseover",
mouseleave:"mouseleave",
mousemove:"mousemove",
DOMContentLoaded:"DOMContentLoaded",
};
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 Hide = function (dom) {
dom.style.display = "none";
};// 隐藏dom
var Hide3 = function (dom1,dom2,dom3) {
dom1.style.display = "none";
dom2.style.display = "none";
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.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) {
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("ajax status is " + xmlReq.status);
}
}
};
xmlReq.send(msg);
};
/* AJAX 接口 */
/* 入口 */
var start = function (fun) {
var begin = function () {
DelEvent(document, EventsType.DOMContentLoaded, begin);
fun();
};
AddEvent(document, EventsType.DOMContentLoaded, 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,
varied_divMIN: 50,
varied_divDEFAULT: 100,
needWH:0,
};
var dom = {
body: null,
SelectPicture: null,
upfile: null,
pre: null,
ccp: null,
bt: null,
prea: null,
preb: null,
prec: null,
ctna: null,
ctnb: null,
ctnc: null,
imga: null,
imgb: null,
imgc: null,
Y_OUT: null,
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,
BottomRight: null,
BottomLeft: null,
};
var ccp = {
SelectPictureW: null,
SelectPictureH: null,
SelectPictureP1: 9,
SelectPictureP2: 4,
SelectPictureL: null,
SelectPictureT: null,
SelectPictureFontSize: null,
///////////////////////////
file: null,
imgtype: null,
imgsize: null,
///////////////////////////
imgW: null,
imgH: null,
imgN: null,
imgURL: null,
//////////////////////////
preW: null,
preH: null,
ccpW: null,
ccpH: null,
btW: null,
btH: null,
/////////////////////////
pre4: null,
preaL: null,
preaT: null,
preaWH: null,
prebL: null,
prebT: null,
prebWH: null,
precL: null,
precT: null,
precWH: null,
ctnLT: 3,
ctnaWH: null,
ctnbWH: null,
ctncWH: null,
//////////////////////////
YN3: null,
YN_OUTWH: null,
YNWH: null,
YN_OUTR: null,
Y_OUTT: null,
N_OUTT: null,
YNLT1: 25,
YNLT2: 20,
//////////////////////////
ctnL: null,
ctnT: null,
black_coverL: null,
black_coverT: null,
/////////////////////////
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_imgT: null,
/////////////////////////
imgaW: null,
imgaH: null,
imgaL: null,
imgaT: null,
imgbW: null,
imgbH: null,
imgbL: null,
imgbT: null,
imgcW: null,
imgcH: null,
imgcL: null,
imgcT: null,
/////////////////////////
};
var GET_DOM = function () {
dom.body = document.body;
dom.pre = $("pre");
dom.ccp = $("ccp");
dom.bt = $("bt");
dom.SelectPicture = $("SelectPicture");
dom.prea = $("prea");
dom.preb = $("preb");
dom.prec = $("prec");
dom.ctna = $("ctna");
dom.ctnb = $("ctnb");
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.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.TopRight = $("TopRight");
dom.BottomRight = $("BottomRight");
dom.BottomLeft = $("BottomLeft");
};
var INIT_DOM = function () {
setStyle2(dom.body, "width", screenW + "px", "height", screenH + "px");
dom.body.style.backgroundImage = get_random_bgimg(7);/////////////////////
set_SelectPictureW(Math.floor(screenW / ccp.SelectPictureP1));
AddEvent2(dom.SelectPicture, EventsType.mouseover, SelectPicture_mouseover, EventsType.mouseleave, SelectPicture_mouseleave);
AddEvent(dom.SelectPicture, EventsType.click, SelectPicture_click);/////////////////////
ccp.preH = ccp.ccpH = ccp.btH = screenH - 2;
ccp.ccpW = screenH + 100 - 2;
ccp.preW = Math.ceil((screenW - (ccp.ccpW + 2)) / 2) - 2;
ccp.btW = screenW - (ccp.ccpW + 2) - (ccp.preW + 2) - 2;
setStyle2(dom.pre, "width", ccp.preW + "px", "height", ccp.preH + "px");
setStyle2(dom.ccp, "width", ccp.ccpW + "px", "height", ccp.ccpH + "px");
setStyle2(dom.bt, "width", ccp.btW + "px", "height", ccp.btH + "px");
Hide3(dom.pre, dom.ccp, dom.bt);/////////////////////
};
var EVENTS = function () {
AddEvent(dom.varied_div, EventsType.mousedown, varied_div_mousedown);//varied_div
AddEvent(dom.TopLeft, EventsType.mousedown, TopLeft_mousedown);//TopLeft
AddEvent(dom.TopRight, EventsType.mousedown, TopRight_mousedown);//TopRight
AddEvent(dom.BottomRight, EventsType.mousedown, BottomRight_mousedown);//BottomRight
AddEvent(dom.BottomLeft, EventsType.mousedown, BottomLeft_mousedown);//BottomLeft
AddEvent(dom.Y, EventsType.click, Y_click);//Y
AddEvent(dom.N, EventsType.click, N_click);//N
};
var END = function () {
AddEvent(document, EventsType.mousemove, cannotselect);
};
start(function () {
GET_DOM();
INIT_DOM();
EVENTS();
END();
});
fun.js
var get_random_bgimg = function (n) {
var m = Math.floor(Math.random() * n);
var r = "url(Images/bg" + 6 + ".png)";
return r;
};
var set_SelectPictureW = function (W) {
ccp.SelectPictureW = W;
ccp.SelectPictureH = Math.floor(ccp.SelectPictureW / ccp.SelectPictureP2);
ccp.SelectPictureL = Math.floor((screenW - ccp.SelectPictureW) / 2);
ccp.SelectPictureT = Math.floor((screenH - ccp.SelectPictureH) / 2);
ccp.SelectPictureFontSize = Math.floor(ccp.SelectPictureH / 1.5);
setStyle(dom.SelectPicture, "font-size", ccp.SelectPictureFontSize + "px");
setLTWH(dom.SelectPicture, ccp.SelectPictureL, ccp.SelectPictureT, ccp.SelectPictureW, ccp.SelectPictureH);
};
var SelectPicture_mouseover = function () {
set_SelectPictureW(ccp.SelectPictureW + 15);
};
var SelectPicture_mouseleave = function () {
set_SelectPictureW(ccp.SelectPictureW - 15);
};
///////////////////////////////////////////////////
var downX, downY, oldL, oldT, tempWH, tempL, tempT, dxMax, tempMaxL, tempMaxT;
var varied_divLimit = function () {
if (ccp.varied_divL < 0)
ccp.varied_divL = 0;
else if (ccp.varied_divL > ccp.varied_divMaxL)
ccp.varied_divL = ccp.varied_divMaxL;
if ((ccp.varied_divT < 0))
ccp.varied_divT = 0;
else if (ccp.varied_divT > ccp.varied_divMaxT)
ccp.varied_divT = ccp.varied_divMaxT;
};
var varied_div_mousedown = function (e) {
if (e.button > 0) {
varied_div_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = ccp.varied_divL;
oldT = ccp.varied_divT;
AddEvent2(document, EventsType.mouseup, varied_div_mouseup, EventsType.mousemove, doc_varied_div_mousemove);
};
var doc_varied_div_mousemove = function (e) {
ccp.varied_divL = oldL + e.clientX - downX;
ccp.varied_divT = oldT + e.clientY - downY;
varied_divLimit();
setLT(dom.varied_div, ccp.varied_divL, ccp.varied_divT);
setvaried_div_img();
setpreimg();
};
var varied_div_mouseup = function () {
DelEvent2(document, EventsType.mouseup, varied_div_mouseup, EventsType.mousemove, doc_varied_div_mousemove);
};
////////////////////////////////////////////////////
var TopLeft_mousedown = function (e) {
if (e.button > 0) {
TopLeft_mouseup();
return false;
}
e.preventDefault && e.preventDefault();
downX = e.clientX;
downY = e.clientY;
oldL = ccp.varied_divL;
oldT = ccp.varied_divT;
tempWH = ccp.varied_divWH;
tempL = ccp.varied_divL;
tempT = ccp.varied_divT;
tempMaxL = ccp.varied_divMaxL;
tempMaxT = ccp.varied_divMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document, EventsType.mouseup, TopLeft_mouseup, EventsType.mousemove, doc_TopLeft_mousemove);
};
var doc_TopLeft_mousemove = function (e) {
varied_div_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx < 0 && Math.abs(dx) > dxMax) {
dx = -dxMax;
}
else if (dx > 0 && dx > tempWH - cfg.varied_divMIN) {
dx = tempWH - cfg.varied_divMIN;
}
ccp.varied_divMaxL = tempMaxL + dx;
ccp.varied_divMaxT = tempMaxT + dx;
ccp.varied_divL = oldL + dx;
ccp.varied_divT = oldT + dx;
ccp.varied_divWH = tempWH - dx;
setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
setvaried_div_img();
setpreimg();
};
var TopLeft_mouseup = function () {
DelEvent2(document, EventsType.mouseup, TopLeft_mouseup, EventsType.mousemove, 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 = ccp.varied_divL;
oldT = ccp.varied_divT;
tempWH = ccp.varied_divWH;
tempL = ccp.imgW - ccp.varied_divL - ccp.varied_divWH;
tempT = ccp.varied_divT;
tempMaxL = ccp.varied_divMaxL;
tempMaxT = ccp.varied_divMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document, EventsType.mouseup, TopRight_mouseup, EventsType.mousemove, doc_TopRight_mousemove);
};
var doc_TopRight_mousemove = function (e) {
varied_div_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx < 0 && Math.abs(dx) > dxMax) {
dx = -dxMax;
}
else if (dx > 0 && dx > tempWH - cfg.varied_divMIN) {
dx = tempWH - cfg.varied_divMIN;
}
ccp.varied_divMaxL = tempMaxL + dx;
ccp.varied_divMaxT = tempMaxT + dx;
ccp.varied_divL = oldL;
ccp.varied_divT = oldT + dx;
ccp.varied_divWH = tempWH - dx;
setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
setvaried_div_img();
setpreimg();
};
var TopRight_mouseup = function () {
DelEvent2(document, EventsType.mouseup, TopRight_mouseup, EventsType.mousemove, 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 = ccp.varied_divL;
oldT = ccp.varied_divT;
tempWH = ccp.varied_divWH;
tempL = ccp.imgW - ccp.varied_divL - ccp.varied_divWH;
tempT = ccp.imgH - ccp.varied_divT - ccp.varied_divWH;
tempMaxL = ccp.varied_divMaxL;
tempMaxT = ccp.varied_divMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document, EventsType.mouseup, BottomRight_mouseup, EventsType.mousemove, doc_BottomRight_mousemove);
};
var doc_BottomRight_mousemove = function (e) {
varied_div_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx > 0 && dx > dxMax) {
dx = dxMax;
}
else if (dx < 0 && Math.abs(dx) > tempWH - cfg.varied_divMIN) {
dx = -(tempWH - cfg.varied_divMIN);
}
ccp.varied_divMaxL = tempMaxL - dx;
ccp.varied_divMaxT = tempMaxT - dx;
ccp.varied_divL = oldL;
ccp.varied_divT = oldT;
ccp.varied_divWH = tempWH + dx;
setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
setvaried_div_img();
setpreimg();
};
var BottomRight_mouseup = function () {
DelEvent2(document, EventsType.mouseup, BottomRight_mouseup, EventsType.mousemove, 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 = ccp.varied_divL;
oldT = ccp.varied_divT;
tempWH = ccp.varied_divWH;
tempL = ccp.varied_divL;
tempT = ccp.imgH - ccp.varied_divT - ccp.varied_divWH;
tempMaxL = ccp.varied_divMaxL;
tempMaxT = ccp.varied_divMaxT;
dxMax = tempL >= tempT ? tempT : tempL;
AddEvent2(document, EventsType.mouseup, BottomLeft_mouseup, EventsType.mousemove, doc_BottomLeft_mousemove);
};
var doc_BottomLeft_mousemove = function (e) {
varied_div_mouseup();//移动事件屏蔽，非常重要
var dx = e.clientY - downY;
if (dx > 0 && dx > dxMax) {
dx = dxMax;
}
else if (dx < 0 && Math.abs(dx) > tempWH - cfg.varied_divMIN) {
dx = -(tempWH - cfg.varied_divMIN);
}
ccp.varied_divMaxL = tempMaxL - dx;
ccp.varied_divMaxT = tempMaxT - dx;
ccp.varied_divL = oldL - dx;
ccp.varied_divT = oldT;
ccp.varied_divWH = tempWH + dx;
setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
setvaried_div_img();
setpreimg();
};
var BottomLeft_mouseup = function () {
DelEvent2(document, EventsType.mouseup, BottomLeft_mouseup, EventsType.mousemove, doc_BottomLeft_mousemove);
};
///////////////////////////////////////////////////
var getDATA = function () {
var parameter = location.search; //获取url中"?"符后的字串
if (parameter.length == 0) {
return 666;
} else {
var ss = parameter.split("&");
url = ss[0].split("=")[1];
cfg.needWH = ss[1].split("=")[1];
}
if (url.length == 0) {
return 777;
} else if (cfg.needWH == 0) {
return 888;
} else if (cfg.needWH > 1000) {
return 999;
}
var canvas = document.createElement("canvas");
canvas.style.display = "none";
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFFF";
canvas.width = canvas.height = cfg.needWH;
ctx.fillRect(0, 0, cfg.needWH, cfg.needWH);
var a = Math.ceil(ccp.varied_divL * ccp.imgN);
var b = Math.ceil(ccp.varied_divT * ccp.imgN);
var c = Math.ceil(ccp.varied_divWH * ccp.imgN);
ctx.drawImage(dom.fixed_img, a, b, c, c, 0, 0, cfg.needWH, cfg.needWH);
return canvas.toDataURL(ccp.imgtype, 1);
};
var callback = function () {
var txt = xmlReq.responseText;
alert(txt);
window.opener = null;
window.open('', '_self');
window.close();
};
var Y_click = function () {
var DATA = getDATA();
DATA == 666 && alert("没有参数");
DATA == 777 && alert("没有返回地址");
DATA == 888 && alert("未给出返回图片大小");
DATA == 999 && alert("图片大小不能超过 1000 X 1000");
if (DATA == 666 || DATA == 777 || DATA == 888 || DATA == 999) {
window.opener = null;
window.open('', '_self');
window.close();
}//没有参数或参数错误关闭页面
method = "post";
msg = "";
AJAX(url, method, "DATA=" + DATA, callback);
};
var N_click = function () {
Hide3(dom.pre, dom.ccp, dom.bt);
};
///////////////////////////////////////////////////
var check_imgtype = function () {
if (!inArray(ccp.imgtype, cfg.imgtype)) {
alert("请选择正确的图片类型");
return false;
} else { return true; }
};
var check_imgsize = function () {
if (ccp.imgsize > cfg.imgsize) {
alert("图片不能超过"+(cfg.imgsize/1024)/1024+"M");
return false;
} else { return true; }
};
var set_pre = function () {
ccp.preaWH = Math.round(ccp.preW * 0.6);
ccp.prebWH = Math.round(ccp.preW * 0.5);
ccp.precWH = Math.round(ccp.preW * 0.4);
ccp.preaL = Math.round((ccp.preW - ccp.preaWH) / 2);
ccp.prebL = Math.round((ccp.preW - ccp.prebWH) / 2);
ccp.precL = Math.round((ccp.preW - ccp.precWH) / 2);
ccp.pre4 = Math.round((ccp.preH - ccp.preaWH - ccp.prebWH - ccp.precWH) / 4);
ccp.preaT = ccp.pre4;
ccp.prebT = ccp.pre4 * 2 + ccp.preaWH;
ccp.precT = ccp.pre4 * 3 + ccp.preaWH + ccp.prebWH;
setLTWH(dom.prea, ccp.preaL, ccp.preaT, ccp.preaWH, ccp.preaWH);
setLTWH(dom.preb, ccp.prebL, ccp.prebT, ccp.prebWH, ccp.prebWH);
setLTWH(dom.prec, ccp.precL, ccp.precT, ccp.precWH, ccp.precWH);
////////////////////////////////////////////////////////////////
ccp.ctnaWH = ccp.preaWH - ccp.ctnLT * 2;
ccp.ctnbWH = ccp.prebWH - ccp.ctnLT * 2;
ccp.ctncWH = ccp.precWH - ccp.ctnLT * 2;
setLTWH(dom.ctna, ccp.ctnLT, ccp.ctnLT, ccp.ctnaWH, ccp.ctnaWH);
setLTWH(dom.ctnb, ccp.ctnLT, ccp.ctnLT, ccp.ctnbWH, ccp.ctnbWH);
setLTWH(dom.ctnc, ccp.ctnLT, ccp.ctnLT, ccp.ctncWH, ccp.ctncWH);
dom.imga.src = dom.imgb.src = dom.imgc.src = ccp.imgURL;
};
var setYN = function (dom, n) {
ccp.YNWH = ccp.YN_OUTWH - n * 2;
setStyle(dom, "font-size", Math.floor(ccp.YNWH * 0.9) + "px");
setLTWH(dom, n, n, ccp.YNWH, ccp.YNWH);
};
var Y_mouseover = function () {
setYN(dom.Y, ccp.YNLT2);
};
var Y_mouseleave = function () {
setYN(dom.Y, ccp.YNLT1);
};
var N_mouseover = function () {
setYN(dom.N, ccp.YNLT2);
};
var N_mouseleave = function () {
setYN(dom.N, ccp.YNLT1);
};
var set_bt = function () {
ccp.YN_OUTWH = Math.round(ccp.btW * 0.6);
ccp.YN_OUTR = Math.round((ccp.btW - ccp.YN_OUTWH) / 2);
ccp.YN3 = Math.round((ccp.btH - ccp.YN_OUTWH * 2) / 3);
ccp.Y_OUTT = ccp.YN3;
ccp.N_OUTT = ccp.YN3 * 2 + ccp.YN_OUTWH;
setRTWH(dom.Y_OUT, ccp.YN_OUTR, ccp.Y_OUTT, ccp.YN_OUTWH, ccp.YN_OUTWH);
setRTWH(dom.N_OUT, ccp.YN_OUTR, ccp.N_OUTT, ccp.YN_OUTWH, ccp.YN_OUTWH);
setYN(dom.Y, ccp.YNLT1);
setYN(dom.N, ccp.YNLT1);
AddEvent2(dom.Y, EventsType.mouseover, Y_mouseover, EventsType.mouseleave, Y_mouseleave);
AddEvent2(dom.N, EventsType.mouseover, N_mouseover, EventsType.mouseleave, N_mouseleave);
};
var setvaried_div = function () {
if (ccp.imgW > ccp.imgH) {
ccp.varied_divWH = ccp.imgH < cfg.varied_divDEFAULT ? ccp.imgH : cfg.varied_divDEFAULT;
}
else {
ccp.varied_divWH = ccp.imgW < cfg.varied_divDEFAULT ? ccp.imgW : cfg.varied_divDEFAULT;
}
ccp.varied_divL = Math.round((ccp.imgW - ccp.varied_divWH) / 2);
ccp.varied_divT = Math.round((ccp.imgH - ccp.varied_divWH) / 2);
ccp.varied_divMaxL = ccp.imgW - ccp.varied_divWH;
ccp.varied_divMaxT = ccp.imgH - ccp.varied_divWH;
setLTWH(dom.varied_div, ccp.varied_divL, ccp.varied_divT, ccp.varied_divWH, ccp.varied_divWH);
};
var setvaried_div_img = function () {
ccp.varied_div_imgL = -ccp.varied_divL;
ccp.varied_div_imgT = -ccp.varied_divT;
setLT(dom.varied_div_img, ccp.varied_div_imgL, ccp.varied_div_imgT);
};
var setpreimg = function () {
var p1, p2, p3;
p1 = ccp.ctnaWH / ccp.varied_divWH;
p2 = ccp.ctnbWH / ccp.varied_divWH;
p3 = ccp.ctncWH / ccp.varied_divWH;
ccp.imgaW = Math.round(p1 * ccp.imgW);
ccp.imgaH = Math.round(p1 * ccp.imgH);
ccp.imgaL = Math.round(p1 * ccp.varied_div_imgL);
ccp.imgaT = Math.round(p1 * ccp.varied_div_imgT);
ccp.imgbW = Math.round(p2 * ccp.imgW);
ccp.imgbH = Math.round(p2 * ccp.imgH);
ccp.imgbL = Math.round(p2 * ccp.varied_div_imgL);
ccp.imgbT = Math.round(p2 * ccp.varied_div_imgT);
ccp.imgcW = Math.round(p3 * ccp.imgW);
ccp.imgcH = Math.round(p3 * ccp.imgH);
ccp.imgcL = Math.round(p3 * ccp.varied_div_imgL);
ccp.imgcT = Math.round(p3 * ccp.varied_div_imgT);
setLTWH(dom.imga, ccp.imgaL, ccp.imgaT, ccp.imgaW, ccp.imgaH);
setLTWH(dom.imgb, ccp.imgbL, ccp.imgbT, ccp.imgbW, ccp.imgbH);
setLTWH(dom.imgc, ccp.imgcL, ccp.imgcT, ccp.imgcW, ccp.imgcH);
};
var set_ccp = function () {
ccp.ctnL = ccp.preW + 3 + Math.ceil((ccp.ccpW - ccp.imgW) / 2);
ccp.ctnT = 1 + Math.ceil((ccp.ccpH - ccp.imgH) / 2);
setLTWH(dom.ctn, ccp.ctnL, ccp.ctnT, ccp.imgW, ccp.imgH);
ccp.black_coverL = ccp.preW + 3;
ccp.black_coverT = 1;
setLTWH(dom.black_cover, ccp.black_coverL, ccp.black_coverT, ccp.ccpW, ccp.ccpH);
setLTWH(dom.fixed_img, 0, 0, ccp.imgW, ccp.imgH);
dom.fixed_img.src = ccp.imgURL;
setvaried_div();
setWH(dom.varied_div_img, ccp.imgW, ccp.imgH);
dom.varied_div_img.src = ccp.imgURL;
setvaried_div_img();
setpreimg();
};
var setStart = function () {
set_pre();
set_bt();
set_ccp();
Show3(dom.pre, dom.ccp, dom.bt);
};
var setImgWH = function (src, type) {
var image = new Image();
image.onload = function () {
var width = this.width, height = this.height;//图片的宽高
var p = width / height;
if (p > 1) {
if (p > ccp.ccpW / 50) {
alert("图片宽高比不能超过" + p);
return;
}
else {
if (height < 50) {
ccp.imgN = height / 50;
ccp.imgH = 50;
ccp.imgW = Math.round(ccp.imgH * p);
}
else if (width > ccp.ccpW) {
ccp.imgN = width / ccp.ccpW;
ccp.imgW = ccp.ccpW;
ccp.imgH = Math.round(ccp.imgW / p);
}
else {
ccp.imgN = 1;
ccp.imgW = width;
ccp.imgH = height;
}
}
}
else {
if (p < 50 / ccp.ccpH) {
alert("图片宽高比不能小于" + p);
return;
}
else {
if (width < 50) {
ccp.imgN = width / 50;
ccp.imgW = 50;
ccp.imgH = Math.round(ccp.imgW / p);
}
else if (height > ccp.ccpH) {
ccp.imgN = height / ccp.ccpH;
ccp.imgH = ccp.ccpH;
ccp.imgW = Math.round(ccp.imgH * p);
}
else {
ccp.imgN = 1;
ccp.imgW = width;
ccp.imgH = height;
}
}
}
ccp.imgURL = this.src;
delete image;
setStart();
};
image.onerror = function () {
alert("图片已损坏，请上传正确图片");
};
image.src = src;
};
var SelectPicture_click = function () {
dom.upfile = document.createElement("input");
setAttr2(dom.upfile, "type", "file", "id", "upfile");
dom.upfile.click();
dom.upfile.onchange = function () {
ccp.file = this.files[0];
ccp.imgtype = ccp.file.type;
if (!check_imgtype()) {
return;
} //检查文件类型
ccp.imgsize = ccp.file.size;
if (!check_imgsize()) {
return;
}; //检查图片大小
var reader = new FileReader();
reader.onload = function () {
setImgWH(this.result, ccp.imgtype);
};
reader.readAsDataURL(ccp.file);
};
};
ccp.css
*{
margin:0px;
padding:0px;
}
#SelectPicture{
position:absolute;
border:3px solid #ff6a00;
border-radius:8px;
color:#ff6a00;
text-align:center;
font-family:'Microsoft YaHei';
cursor:pointer;
}
#upfile{
display:none;
}
#pre,#ccp,#bt{
float:left;
z-index:1;
border:1px solid #ffffff;
}
#ccp{
border:1px dashed #808080;
border-left:1px dashed #808080;
border-right:1px dashed #808080;
}
#prea,#preb,#prec{
position:absolute;
background-color:#ff6a00;
border-radius:7px;
}
#ctna,#ctnb,#ctnc{
position:absolute;
background-color:#ffffff;
overflow:hidden;
}
#imga,#imgb,#imgc{
position:absolute;
left:0px;
top:0px;
}
#Y_OUT,#N_OUT{
position:absolute;
}
#Y,#N{
/* background-color:#ff6a00;*/
position:absolute;
text-align:center;
border:3px solid #ff6a00;
border-radius:50%;
color:#ff6a00;
font-family:Arial;
cursor:pointer;
}
#ctn{
position:absolute;
background-color:blueviolet;
overflow:hidden;
}
#black_cover{
position:absolute;
background-color:black;
opacity:0.6;
z-index:3;
}
#fixed_img{
position:absolute;
}
#varied_div{
position:absolute;
z-index:4;
overflow: hidden;
cursor:move;
}
#BottomRight,#TopRight,#TopLeft,#BottomLeft {
background:#D6FB66;
display:block;
width:6px;
height:6px;
position:absolute;
z-index:5;
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;
}
#varied_div_img{
position:absolute;
z-index:5;
}
以上就是本文的全部內容，希望對大家學習javascript程式設計有所幫助。
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。
使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AMJavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AMJavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌
熱工具
SublimeText3漢化版
中文版，非常好用
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
