123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239 |
- //14互联网G5-2 杨思强 刘希鹏 钟兆立
- Namespace.register("U.Control.SI"); //命名空间
- /*window.onload = function () {
- U.Control.SI.GetWinSize();
- U.Control.SI.window();
- };*/
- //调用U.Control.SI.window();生成初始图片 初始函数
- //test
- //监听窗口大小变化 图片查看器大小也随着改变
- //window.onresize = function () {
- // U.Control.SI.Change();
- //}
- //创建图片查看器 主要功能函数 返回 点击后的图片和功能按钮
- U.Control.SI = function (Array, i) { //Array 传入图片地址 i 第几张图片
- if (!$("#U_SI_B")[0]) {
- var U_C_SI_M = $$("div", { "id": "U_SI_C", "style": { "display": "block"} }, $("body")[0]); //主体
- var U_C_SI_B = $$("div", { "id": "U_SI_B", "className": "U_SI_B", "onclick": [[U.Control.SI]], "style": { "display": "block"} }, U_C_SI_M); //背景
- // U_C_SI_B.onclick = function () { U.Control.SI(Array, i); };
- var U_C_SI = $$("div", { "id": "U_SI", "className": "U_SI" }, U_C_SI_M); //内容区域
- var U_C_SI_Box = $$("div", { "id": "U_SI_Box", "class": "U_SI_Box" }, U_C_SI); //图片div
- var U_C_SI_Img = $$("img", { "id": "U_SI_Img", "class": "U_SI_Img" }, U_C_SI_Box); //图片标签
- $('#U_SI_Img')[0].style.width = "100%";
- $('#U_SI_Img')[0].style.height = "100%"; //高宽
- var U_SI_But = $$("div", { "id": "U_SI_But", "class": "U_SI_But" }, U_C_SI); //按钮
- var U_SI_But_UL = $$("ul", { "style": { "padding-top": "5px"} }, U_SI_But);
- //var arr = ['xz', 'qp', 'xz', 'bc', 'left', 'bf', 'right'];
- var FunId = ["Amp", "Nar", "Rot", "Save", "Prev", "Play", "Next"]; //存储功能按钮图片
- for (var j = 0; j < FunId.length; j++) {
- if (FunId[j] == "Save") {
- var li = $$("li", { "id": "U_SI_But_" + FunId[j] }, U_SI_But_UL);
- var a = $$("a", { "id": "U_SI_B_Save" }, li);
- var img = $$("img", { "class": "U_SI_But_FI", "src": 'http://d.1473.cn/controls/pc/SrcImg/img/' + FunId[j] + '.png' }, a);
- var li = $$("li", { "style": { "width": "1.6px", "background-color": "rgba(255, 255, 255, 0.4)", "height": "25px", "margin": "1px 0px 0 10px", "padding": "0"} }, U_SI_But_UL);
- } else {
- var li = $$("li", { "id": "U_SI_But_" + FunId[j], "onclick": "U.Control.SI." + FunId[j] + "();" }, U_SI_But_UL);
- var img = $$("img", { "class": "U_SI_But_FI", "src": 'http://d.1473.cn/controls/pc/SrcImg/img/' + FunId[j] + '.png' }, li);
- }
- }
- U.Control.SI.Change();
- } else if ($("#U_SI_C")[0].style.display == "block") {
- U.Control.SI.Play(1);
- $("#U_SI_C")[0].style.display = "none";
- return;
- }
- var U_SI_Timer = null;
- $("#U_SI_B_Save")[0].href = $("#U_SI_B_Save")[0].download = $("#U_SI_Img")[0].src = Array[i].Url;
- U.Control.SI.UDE = Array;
- U.Control.SI.i = i;
- U.Control.SI.P = 0;
- U.Control.SI.Rora = 0;
- $("#U_SI_Img")[0].style.transform = 'rotate(' + 0 + 'deg)';
- $("#U_SI_C")[0].style.display = "block";
- return U_C_SI_M;
- }
- //创建三张图片实例 返回三张图片
- U.Control.SI.window = function () {
- var Array = [
- { "Url": "http://fs.1473.cn/ea65b74f-f181-4c74-a226-1c0a94903f9d.jpg", "Name": "1.jpg" },
- { "Url": "http://fs.1473.cn/67655a34-5285-4fcb-a1c2-a529a72e4685.jpg", "Name": "2.jpg" },
- { "Url": "http://fs.1473.cn/bbc4491f-12bc-4457-abfc-9f4a931fb4c1.jpg", "Name": "3.jpg" }
- ];
- return U.Control.SI.CreImg(Array);
- }
- //创建图片
- U.Control.SI.CreImg = function (Array) { //传入图片地址
- var i = 0;
- var U_SI = $$("div", { "style": { "width": "100$", "height": "100%"} }, $("Body")[0]);
- var U_SI_Wrap = $$("div", { "class": "U_SI_Wrap" }, U_SI);
- var U_SI_Wrap_ul = $$("ul", {}, U_SI_Wrap);
- //for (i = 0; a < Array.length; i++) {
- while (i < Array.length) { //循环输出 for也行的
- var li = $$("li", { "onclick": [[U.Control.SI, ([Array, i])]] }, U_SI_Wrap_ul);
- var img = $$("img", { "src": Array[i].Url }, li);
- i++;
- }
- var U_C_SI_M = $$("div", { "id": "U_SI_C", "style": { "display": "none"} }, U_SI); //主体
- var U_C_SI_B = $$("div", { "id": "U_SI_B", "className": "U_SI_B", "onclick": [[U.Control.SI]], "style": { "display": "block"} }, U_C_SI_M); //背景
- // U_C_SI_B.onclick = function () { U.Control.SI(Array, i); };
- var U_C_SI = $$("div", { "id": "U_SI", "className": "U_SI" }, U_C_SI_M); //内容区域
- var U_C_SI_Box = $$("div", { "id": "U_SI_Box", "class": "U_SI_Box" }, U_C_SI); //图片div
- var U_C_SI_Img = $$("img", { "id": "U_SI_Img", "class": "U_SI_Img" }, U_C_SI_Box); //图片标签
- $('#U_SI_Img')[0].style.width = "100%";
- $('#U_SI_Img')[0].style.height = "100%"; //高宽
- var U_SI_But = $$("div", { "id": "U_SI_But", "class": "U_SI_But" }, U_C_SI); //按钮
- var U_SI_But_UL = $$("ul", { "style": { "padding-top": "5px"} }, U_SI_But);
- //var arr = ['xz', 'qp', 'xz', 'bc', 'left', 'bf', 'right'];
- var FunId = ["Amp", "Nar", "Rot", "Save", "Prev", "Play", "Next"]; //存储功能按钮图片
- for (var j = 0; j < FunId.length; j++) {
- if (FunId[j] == "Save") {
- var li = $$("li", { "id": "U_SI_But_" + FunId[j] }, U_SI_But_UL);
- var a = $$("a", { "id": "U_SI_B_Save" }, li);
- var img = $$("img", { "class": "U_SI_But_FI", "src": 'http://d.1473.cn/controls/pc/SrcImg/img/' + FunId[j] + '.png' }, a);
- var li = $$("li", { "style": { "width": "1.6px", "background-color": "rgba(255, 255, 255, 0.4)", "height": "25px", "margin": "1px 0px 0 10px", "padding": "0"} }, U_SI_But_UL);
- } else {
- var li = $$("li", { "id": "U_SI_But_" + FunId[j], "onclick": "U.Control.SI." + FunId[j] + "();" }, U_SI_But_UL);
- var img = $$("img", { "class": "U_SI_But_FI", "src": 'http://d.1473.cn/controls/pc/SrcImg/img/' + FunId[j] + '.png' }, li);
- }
- }
- U.Control.SI.Change();
- U_C_SI_M.style.dispaly = "none";
- return U_SI;
- }
- //窗口大小改变图片查看器大小随之改变
- U.Control.SI.Change = function () {
- if ($("#U_SI_B")[0] && $("#U_SI_B")[0].style.display == "block") {
- U.Control.SI.GetWinSize(); //触发函数 去获取浏览器窗口的大小 创建出合适的div
- var U_C_SI_Hei = winHeight * 0.6 < 350 ? 350 : winHeight * 0.6;
- var U_C_SI_Wid = U_C_SI_Hei * 1.4;
- $("#U_SI").addAttrArray({
- "style": {
- "width": U_C_SI_Wid + "px",
- "height": U_C_SI_Hei + "px",
- "top": ((winHeight - U_C_SI_Hei - 20) < 0 ? 0 : (winHeight - U_C_SI_Hei - 20)) / 2 + "px",
- "left": ((winWidth - U_C_SI_Wid) < 0 ? 0 : (winWidth - U_C_SI_Wid)) / 2 + "px",
- "z-index": "9999"
- }
- });
- }
- }
- //获取窗口大小
- U.Control.SI.GetWinSize = function () {
- if (window.innerHeight && window.innerWidth) {
- winHeight = window.innerHeight;
- winWidth = window.innerWidth;
- }
- else if ((document.body) && (document.body.clientHeight) && (document.body.clientWidth)) {
- winHeight = document.body.clientHeight;
- winWidth = document.body.clientWidth;
- }
- // 通过深入Document内部对body进行检测,获取窗口大小
- if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
- winHeight = document.documentElement.clientHeight;
- winWidth = document.documentElement.clientWidth;
- }
- // return [winHeight, winWidth];
- }
- //缩小
- U.Control.SI.Amp = function () {
- var Amp_wid = parseInt($('#U_SI_Img')[0].style.width);
- var Amp_hei = parseInt($('#U_SI_Img')[0].style.height);
- if (Amp_wid == 50 || Amp_hei == 50) {
- return;
- }
- Amp_hei -= 10;
- Amp_wid -= 10;
- $("#U_SI_Img")[0].style.position = "relative";
- $("#U_SI_Img")[0].style.left = (100 - Amp_wid) / 2 + '%'; //就是每次缩小10%
- $("#U_SI_Img")[0].style.top = (100 - Amp_hei) / 2 + '%';
- $("#U_SI_Img")[0].style.width = Amp_wid + '%';
- $("#U_SI_Img")[0].style.height = Amp_hei + '%';
- U.Control.SI.Play(1);
- }
- //放大
- U.Control.SI.Nar = function () {
- var Amp_wid = parseInt($('#U_SI_Img')[0].style.width);
- var Amp_hei = parseInt($('#U_SI_Img')[0].style.height);
- if (Amp_wid == 100 || Amp_hei == 100) {
- alert("拖动功能暂时未做,只支持100%大小");
- return;
- }
- Amp_hei += 10;
- Amp_wid += 10;
- $("#U_SI_Img")[0].style.left = (100 - Amp_wid) / 2 + '%'; //每次放大10%
- $("#U_SI_Img")[0].style.top = (100 - Amp_hei) / 2 + '%';
- $("#U_SI_Img")[0].style.width = Amp_wid + '%';
- $("#U_SI_Img")[0].style.height = Amp_hei + '%';
- U.Control.SI.Play(1);
- }
- //旋转
- U.Control.SI.Rot = function () {
- U.Control.SI.Play(1);
- U.Control.SI.Rora++;
- // transform: rotate(90deg)scale(0.6,0.75);
- $("#U_SI_Img")[0].style.transform = 'rotate(' + U.Control.SI.Rora * 90 + 'deg)'; //每次旋转90度
- }
- //保存
- //U.Control.SI.Save = function () {
- //}
- //上一张
- U.Control.SI.Prev = function () {
- U.Control.SI.Play(1);
- if (U.Control.SI.i - 1 < 0) {//第一张限制
- U.Control.SI.i = U.Control.SI.UDE.length;
- }
- $("#U_SI_Img")[0].style.transform = 'rotate(' + 0 + 'deg)';
- U.Control.SI.i -= 1;
- $("#U_SI_B_Save")[0].href = $("#U_SI_B_Save")[0].download = $("#U_SI_Img")[0].src = U.Control.SI.UDE[U.Control.SI.i].Url;
- }
- //自动播放
- U.Control.SI.Play = function (T) {
- if (U.Control.SI.P == 1 || T == 1) {
- if (U.Control.SI.SrcSplit($("#U_SI_But_Play img")[0].src) == "Stp.png") {//如果按钮的src地址是停止按钮 停止计时器
- clearInterval(U_SI_Timer);
- }
- U.Control.SI.P = 0;
- $("#U_SI_But_Play img")[0].src = "http://d.1473.cn/controls/pc/SrcImg/img/Play.png"; //换成播放按钮
- } else {
- U.Control.SI.P = 1;
- $("#U_SI_Img")[0].style.transform = 'rotate(' + 0 + 'deg)'; //如果上一个操作有旋转 让播放的时候图片归回0deg
- $("#U_SI_But_Play img")[0].src = "http://d.1473.cn/controls/pc/SrcImg/img/Stp.png"; //换成暂停按钮
- U_SI_Timer = setInterval(function () {
- U.Control.SI.Next(0);
- }, 1000);
- }
- }
- //下一张
- U.Control.SI.Next = function (auto) {
- if (auto != 0) {
- U.Control.SI.Play(1);
- }
- $("#U_SI_Img")[0].style.transform = 'rotate(' + 0 + 'deg)';
- if (U.Control.SI.i + 1 == U.Control.SI.UDE.length) { //最后一张限制
- U.Control.SI.i = -1;
- }
- U.Control.SI.i += 1;
- $("#U_SI_B_Save")[0].href = $("#U_SI_B_Save")[0].download = $("#U_SI_Img")[0].src = U.Control.SI.UDE[U.Control.SI.i].Url;
- }
- //路径截取
- U.Control.SI.SrcSplit = function (Src) {
- // var Arr = new Array();
- Arr = Src.split("/");
- var result = Arr[Arr.length - 1];
- return result;
- }
|