网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 全屏js头像上传插件源码高清版
范文
    本文实例为大家分享了全屏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 ? 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程序设计有所帮助。
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 7:57:34