全屏js头像上传插件源码高清版_Javascript教程-查字典教程网

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

摘要：本文实例为大家分享了全屏js头像上传插件源码，供大家参考，具体内容如下index.htmlccp选择图片YNcxc.js/*cxc.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

fun.js

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程序设计有所帮助。

【全屏js头像上传插件源码高清版】相关文章：

★ js实现异步循环实现代码

★ JS动画效果打开、关闭层的实现方法

★ jQuery异步上传文件插件ajaxFileUpload详细介绍

★ 理解javascript定时器中的单线程

★ 加入收藏夹代码（兼容 gecko）

★ js兼容火狐获取图片宽和高的方法

★ 如何用JS取得网址中的文件名

★ 使用Node.js处理前端代码文件的编码问题

★ 免费空间广告万能消除代码

★ jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

上一篇： js闭包引起的事件注册问题介绍

下一篇：基于javascript实现九宫格大转盘效果

学习工具