社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 web前端 js教程 全屏js头像上传插件源码高清版_javascript技巧

全屏js头像上传插件源码高清版_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:07 PM

本文实例为大家分享了全屏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"/> 
      </div> 
    </div> 
    <div id="preb"> 
      <div id="ctnb"> 
        <img id="imgb"/> 
      </div> 
    </div> 
    <div id="prec"> 
      <div id="ctnc"> 
        <img id="imgc"/> 
      </div> 
    </div> 
  </div> 
 
  <div id="ccp"> 
    <div id="ctn"> 
      <img id="fixed_img" /> 
      <div id="varied_div"> 
        <img id="varied_div_img" /> 
        <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 &#63; 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 &#63; 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 &#63; 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 &#63; 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中"&#63;"符后的字串 
  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 &#63; ccp.imgH : cfg.varied_divDEFAULT; 
  } 
  else { 
    ccp.varied_divWH = ccp.imgW < cfg.varied_divDEFAULT &#63; 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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
1 个月前 By DDD
<🎜>：死铁路 - 如何完成所有挑战
3 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7625
15
CakePHP 教程
1389
52
steam的账户名称是什么格式
89
11
win11激活密钥永久
70
19
NYT连接提示和答案
31
138
显示更多
Related knowledge
前端热敏纸小票打印遇到乱码问题怎么办？ 前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

谁得到更多的Python或JavaScript？ 谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript：它的作用以及为什么重要 神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？ 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？ Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...

如何实现视差滚动和元素动画效果，像资生堂官网那样？ 或者： 怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？ 如何实现视差滚动和元素动画效果，像资生堂官网那样？ 或者： 怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？ Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...

console.log输出结果差异：两次调用为何不同？ console.log输出结果差异：两次调用为何不同？ Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...

JavaScript难以学习吗？ JavaScript难以学习吗？ Apr 03, 2025 am 12:20 AM

学习JavaScript不难，但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程，通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误，使用调试技巧。5)优化性能，遵循最佳实践。

前端开发中如何实现类似 VSCode 的面板拖拽调整功能？ 前端开发中如何实现类似 VSCode 的面板拖拽调整功能？ Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中，如何实现类似于VSCode...

See all articles