UseStudio.CloudFront/controls/pc/SrcImg/ScrImg.js

//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;
}