CocoRoboDesktop/js/Controls/Mobile/Picture.js

Namespace.register("U.MT.UI.Picture");

/**
*   起始函数
*/
U.MT.UI.Picture = U.MT.UI.picture = function (arr, choosenum) {

    if (!!arr || typeof arr != 'array') {
        return;
    }

    //设置全局属性
    U.MT.UI.Picture.ATTR = {
        "start": [], /*手势缩放，获取双指触碰屏幕的数据*/
        "now": [], /*双指移动时，双指的数据*/
        "startX": 0 /*手指触碰屏幕是记录手指到屏幕边的距离*/
    }

    /*模拟数据*/

    U.MT.UI.Picture.USERPICS = arr;
    //创建控件
    U.MT.UI.Picture.create(choosenum);
};

U.MT.UI.Picture.MTW = document.documentElement.clientWidth/*获取当前手机的长度*/

U.MT.UI.Picture.MTH = document.documentElement.clientHeight /*获取当前手机的宽度*/

U.MT.UI.Picture.currentnum = 0 /*手机当前显示图片的位置*/

U.MT.UI.Picture.lastnum = 0 /*手机上一次显示图片的位置*/

U.MT.UI.Picture.rotatenum = 0 /*旋转角度*/

U.MT.UI.Picture.scalenum = 1 /*缩放大小*/

U.MT.UI.Picture.picmovedis = [0, 0] /*图片放大后拖动距离,【x，y】*/

U.MT.UI.Picture.conpicbox = null /*选择图片组的大div*/

U.MT.UI.Picture.header = null /*头部*/

U.MT.UI.Picture.showstage = null /*展示图片的大div*/

U.MT.UI.Picture.showpicplace = null /*图片的父元素*/

U.MT.UI.Picture.download = null /*下载按钮*/

U.MT.UI.Picture.pics = null /*所有图片存放位置*/

U.MT.UI.Picture.picarr = null /*组图片存放位置*/

U.MT.UI.Picture.disx = 0 /*点击屏幕的X距离*/

U.MT.UI.Picture.disy = 0 /*点击屏幕的Y距离*/

U.MT.UI.Picture.touchstartx = 0 /*点击屏幕的Y距离*/

U.MT.UI.Picture.timer = null /*定时器，为实现双击事件*/

U.MT.UI.Picture.dbclicktimes = 0 /*点击次数*/

U.MT.UI.Picture.checkscale = true /*是否缩放，true没有缩放，false放大了*/

U.MT.UI.Picture.scalew = 0 /*缩放后图片的长*/

U.MT.UI.Picture.scaleh = 0 /*缩放后图片的宽*/

U.MT.UI.Picture.touchmovedisx = 0 /*在放大的状态，进行图片的拖动，因为使用的css属性，以图片的中点为原点，图片中心点的距离*/

U.MT.UI.Picture.touchmovedisy = 0 /*图片中心点的Y距离*/

U.MT.UI.Picture.start = 0 /*手势缩放，获取双指触碰屏幕的数据*/

U.MT.UI.Picture.now = 0 /*双指移动时，双指的数据*/

U.MT.UI.Picture.startx = 0 /*手指触碰屏幕是记录手指到屏幕边的距离*/

U.MT.UI.Picture.picUrl = ''


/*图片控件HTML模板*/
U.MT.UI.Picture.TEMPLATE = [
        '<header class="U_MT_UI_Picture_header" id="U_MT_UI_Picture_header">' +
        '        <div class="U_MT_UI_Picture_header_a">' +
        '            <p>' +
        '                <i class="U_MT_UI_Picture_icon" id="U_MT_UI_Picture_back"></i>' +
        '                <span class="U_MT_UI_Picture_title">图片及视频</span>' +
        '                <span style="position: absolute;right: 1.25rem;" id="U_MT_UI_Picture_close" onclick="U.MT.UI.Picture.close()">关闭</span>' +
        '            </p>' +
        '        </div>' +
        '    </header>' +
        '    <section class="U_MT_UI_Picture_content" id="U_MT_UI_Picture_content">' +
        '    </section>',

        '<section class="U_MT_UI_Picture_show_stage" id="U_MT_UI_Picture_showStage">' +
        '<span style="position: absolute;left: 1rem; top: 1rem; color:#fff; z-index:1; border: 1px solid white;padding: 2px 4px;box-shadow: 0 0 5px #fff;" id="U_MT_UI_Picture_close" onclick="U.MT.UI.Picture.close()">关闭</span>' +
        '<span class="U_MT_UI_Picture_moreIcon" id="U_MT_UI_Picture_moreIcon"></span>' +
        '<div class="U_MT_UI_Picture_stage_bottom">' +
        '<span class="U_MT_UI_Picture_stage_turnRight" id="U_MT_UI_Picture_turnRight"></span>' +
        '<span class="U_MT_UI_Picture_stage_turnLeft" id="U_MT_UI_Picture_turnLeft"></span>' +
        '<a class="U_MT_UI_Picture_download" id="U_MT_UI_Picture_download"></a>' +
        '</div>' +
        '<div class="U_MT_UI_Picture_show_pic" id="U_MT_UI_Picture_showPic">' +
        '<div class="U_MT_UI_Picture_showPicPlace" id="U_MT_UI_Picture_showPicPlace">' +
        '</div>' +
        '</div>' +
        '</section>'
    ];

/**
* 控件初始化
* @param this 简写命名空间
*/
U.MT.UI.Picture.create = function (choosenum) {

    if (U.MT.UI.Picture.conpicbox) {
        U.MT.UI.Picture.conpicbox.innerHTML = "";
        U.MT.UI.Picture.picUrl = '';
        U.MT.UI.Picture.addPic(U.MT.UI.Picture.USERPICS, choosenum);
        U.selectEl('#U_MT_UI_Picture_picBox')[0].style.display = 'block';
        return;
    }

    var _box = $$('div', { id: 'U_MT_UI_Picture_picBox', className: 'U_MT_UI_Picture_pic_box' }, document.body); /*创建出最外层div*/

    _box.innerHTML = this.TEMPLATE[0] + this.TEMPLATE[1]; /*把打好的模板丢进去*/

    var _showPic = U.selectEl('#U_MT_UI_Picture_showPic')[0]; /*图片的父父元素*/

    U.MT.UI.Picture.conpicbox = U.selectEl('#U_MT_UI_Picture_content')[0]; /*获取选择图片组的大div*/
    U.MT.UI.Picture.header = U.selectEl('#U_MT_UI_Picture_header')[0]; /*头部*/
    U.MT.UI.Picture.showstage = U.selectEl('#U_MT_UI_Picture_showStage')[0]; /*展示图片的大div*/
    U.MT.UI.Picture.showpicplace = U.selectEl('#U_MT_UI_Picture_showPicPlace')[0]; /*图片的父元素*/
    U.MT.UI.Picture.download = U.selectEl('#U_MT_UI_Picture_download')[0]; /*下载按钮*/

    this.addPic(this.USERPICS, choosenum); /*创建图片展示列表*/

    U.MT.UI.Picture.loadbind();

    U.MT.UI.Picture.touchDrag(_showPic, U.MT.UI.Picture.showpicplace); /*激活拖拽切换图片*/
}

U.MT.UI.Picture.loadbind = function () {

    /*给返回图片组一个点击事件*/
    U.selectEl('#U_MT_UI_Picture_moreIcon')[0].addEventListener('click', U.UF.C.apply(this, function () {
        this.header.style.display = 'block'; /*头部显示*/
        this.conpicbox.style.display = 'block'; /*图片列表显示*/
        this.showstage.style.display = 'none'; /*图片展示区隐藏*/
    }), false);

    /*给返回展示图片一个点击事件*/
    U.selectEl('#U_MT_UI_Picture_back')[0].addEventListener('click', U.UF.C.apply(this, function () {
        if (this.pics) { /*判断图片展示区是否有图片*/
            this.header.style.display = 'none'; /*头部隐藏*/
            this.conpicbox.style.display = 'none'; /*图片列表有隐藏*/
            this.showstage.style.display = 'block'; /*图片展示区显示*/
        } else {
            U.alert('请先选择图片', 2000); /*提示*/
        }
    }), false);

    /*给右旋转一个点击事件*/
    U.selectEl('#U_MT_UI_Picture_turnRight')[0].addEventListener('click', U.UF.C.apply(this, function () {
        this.rotatenum -= 90; /*逆时针旋转90°*/
        this.transformControl(U.MT.UI.Picture.pics[this.currentnum], 'rotate(' + this.rotatenum + 'deg)'); /*替换该图片的transform属性进行旋转*/
    }), false);

    /*给左旋转一个点击事件*/
    U.selectEl('#U_MT_UI_Picture_turnLeft')[0].addEventListener('click', U.UF.C.apply(this, function () {
        this.rotatenum += 90; /*顺时针旋转90°*/
        this.transformControl(U.MT.UI.Picture.pics[this.currentnum], 'rotate(' + this.rotatenum + 'deg)'); /*替换该图片的transform属性进行旋转*/
    }), false);

    var _closes = U.selectEl('.U_MT_UI_Picture_close')
}

U.MT.UI.Picture.close = function () {
    if (_el = U.selectEl('#U_MT_UI_Picture_picBox')[0]) /*是否创建此控件*/
        _el.style.display = 'none';  /*隐藏控件*/
}

/**
* 循环创建图片
* @param arr 对象数组
* @param _margin 一排图片排满后剩余的边距大小
*/
U.MT.UI.Picture.addPic = function (arr, choosenum) {

    if (typeof arr[0] === 'string') {
        var _cbox = $$('div', { className: 'U_MT_UI_Picture_content_a' }, U.MT.UI.Picture.conpicbox), /*创建大div来包住图片*/
            _s;
        for (var i = 0; i < arr.length; i++) {
            _s = $$('span', { /*创建图片*/className: 'U_MT_UI_Picture_divPic', style: { "background-image": "url(" + arr[i] + ")"} }, _cbox);

            U.MT.UI.Picture.picUrl += arr[i] + ((arr.length - 1 !== i) ? ',' : ''); /*绑上当前循环的数组*/
        }

        if (arr.length === 1) {
            U.selectEl('#U_MT_UI_Picture_moreIcon')[0].style.display = 'none';
        }

        U.MT.UI.Picture.showPic(U.MT.UI.Picture.picUrl + ',' + (choosenum || 0));
        return;
    }

    for (var a in arr) { /*循环对象数组*/

        if (a === 'date') { /*若键名是date，说明是日期*/
            $$('p', { style: { 'padding': '.8rem' }, innerText: arr[a] }, U.MT.UI.Picture.conpicbox);
            continue; /*跳过本次循环*/
        }

        if (a === 'pic' && Array.isArray(arr[a])) { /*若键名是pic同时pic又是数组*/
            var _cbox = $$('div', { className: 'U_MT_UI_Picture_content_a' }, U.MT.UI.Picture.conpicbox); /*创建大div来包住图片*/
            for (var i = 0; i < arr[a].length; i++) { /*循环里面的数组*/
                var _s = $$('span', { /*创建图片*/className: 'U_MT_UI_Picture_divPic', style: { "background-image": "url(" + arr[a][i] + ")"} }, _cbox);
                _s.arr = arr[a] + "," + i; /*绑上当前循环的数组*/
                _s.onclick = function () { /*给上点击事件*/
                    U.MT.UI.Picture.showPic(this.arr);
                }
            }
            continue; /*跳过本次循环*/
        }

        if (typeof arr[a] == 'object') /*若键值是对象*/
            U.MT.UI.Picture.addPic(arr[a]); /*进行回掉*/
    }
}
/**
* 展示图片组里面的图片
* @param picSource 由图片组的图片链接组成的字符串，最后一个数字是用户点击图片组的第几张图片
*/
U.MT.UI.Picture.showPic = function (picSource) {

    U.MT.UI.Picture.picarr = picSource.split(','); /*用逗号切割数组*/
    U.MT.UI.Picture.currentnum = parseInt(U.MT.UI.Picture.picarr.pop()); /*获取切割好的数组的最后一个，也就是用户选择的第几张*/

    U.MT.UI.Picture.showpicplace.innerHTML = ""; /*清空图片展示区*/
    U.MT.UI.Picture.header.style.display = 'none'; /*隐藏头部*/
    U.MT.UI.Picture.conpicbox.style.display = 'none'; /*隐藏所有资源*/
    U.MT.UI.Picture.showstage.style.display = 'block'; /*显示展示图片组的div*/

    for (var i = 0; i < U.MT.UI.Picture.picarr.length; i++) { /*循环切割好的数组*/
        var _div = $$('div', { style: { display: "inline-block", width: U.MT.UI.Picture.MTW + 'px', height: '100%'} }, U.MT.UI.Picture.showpicplace); /*创建一个div*/
        var _img = $$('img', { "onerror": U.MD.C.imgError, src: U.MT.UI.Picture.picarr[i], className: "U_MT_UI_Picture_showImage", style: { transition: 'transform .25s'} }, _div); /*把图片丢到div里面去*/
    }

    U.MT.UI.Picture.pics = U.selectEl('.U_MT_UI_Picture_showImage'); /*刚才创建好的图片*/
    U.MT.UI.Picture.pics[0].onload = U.UF.C.apply(this, function () { /*判断图片是否加载完成*/

        for (var i = 0; i < U.MT.UI.Picture.pics.length; i++) {
            U.MT.UI.Picture.pics[i].style.marginTop = (U.MT.UI.Picture.MTH - U.MT.UI.Picture.pics[i].clientHeight) / 2 + 'px';
        }

        this.showpicplace.style.width = this.picarr.length * 100 + '%'; /*给适宜的长*/
        this.transformControl(this.showpicplace, 'translate(' + (-this.MTW * this.currentnum) + 'px)');
        this.downloadPic(U.MT.UI.Picture.download); /*切换下载图片的地址*/
    });
}
/**
* 图片展示区的拖拽切换图片
* @param dragEl 拖拽的元素
* @param moveEl 拖拽后需要移动的元素
*/
U.MT.UI.Picture.touchDrag = function (dragEl, moveEl) {

    dragEl.addEventListener('touchstart', function (event) { /*手指触碰屏幕*/
        U.MT.UI.Picture.touchStart(moveEl, event);
    });

    dragEl.addEventListener('touchmove', function (event) { /*手指在屏幕滑动*/
        U.MT.UI.Picture.touchMove(moveEl, event);
    });

    dragEl.addEventListener('touchend', function (event) { /*手指从屏幕移开*/
        U.MT.UI.Picture.touchEnd(moveEl);
    });

    moveEl.addEventListener('transitionend', U.UF.C.apply(this, function () { /*切换动画结束后*/

        if (this.currentnum != this.lastnum) { /*当上一张图片的位置数为等于当前图片的位置数是*/

            this.pics[this.lastnum].style.transform = ''; /*还原*/
            this.pics[this.lastnum].style.webkitTransform = ''; /*兼容*/
        };
    }))
}
/**
* 手指接触了屏幕后触发的事件
* @param moveEl 拖拽后需要移动的元素
* @param event 事件的状态
*/
U.MT.UI.Picture.touchStart = function (moveEl, event) {
    var _mElTransform = moveEl.style.transform === "" ? 0 : parseInt(moveEl.style.transform.match(new RegExp(/[0-9-.]/ig)).join('')); /*获取移动元素的移动距离*/

    event.preventDefault(); /*阻止默认事件*/
    if (event.touches.length == 1) { /*点击屏幕手指数量为1时*/

        var _touch = event.targetTouches[0]; /*获取手指的位置*/
        U.MT.UI.Picture.disx = _touch.clientX - _mElTransform; /*获取点击屏幕的X距离*/
        U.MT.UI.Picture.disy = _touch.clientY; /*获取点击屏幕的Y距离*/
        U.MT.UI.Picture.startx = _touch.clientX; /*获取点击屏幕的X距离*/
        U.MT.UI.Picture.touchstartx = _mElTransform; /*获取点击屏幕时，拖动元素的偏移量*/
        moveEl.style.transition = null; /*阻止拖动时产生的动画*/
        moveEl.style.webkitTransition = null; /*兼容处理*/
        U.MT.UI.Picture.fingernum = 1; /*赋值一根手指*/

        U.MT.UI.Picture.dbclicktimes++; /*点击数++*/
        U.MT.UI.Picture.timer = setTimeout(function () { /*生成一个定时器*/
            clearTimeout(this.timer); /*若200毫秒内没有连续点击屏幕2次，将刷新点击数*/
            this.dbclicktimes = 0; /*刷新点击数*/
        } .bind(this), 200); /*200毫秒后执行里面的内容*/

        if (U.MT.UI.Picture.dbclicktimes === 2) { /*当双击屏幕后*/
            clearTimeout(U.MT.UI.Picture.timer); /*清除定时器*/
            U.MT.UI.Picture.dbclicktimes = 0; /*刷新点击数*/
            if (U.MT.UI.Picture.checkscale) { //双击放大

                var _multipleSize = parseInt(U.MT.UI.Picture.MTH / U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientHeight * 100) / 100; /*计算图片缩放的倍数*/
                U.MT.UI.Picture.scalenum = _multipleSize; /*把缩放倍数给上全局*/
                U.MT.UI.Picture.scalew = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientWidth * _multipleSize; /*赋值放大后的图片长*/
                U.MT.UI.Picture.scaleh = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientHeight * _multipleSize; /*赋值放大后䣌图片宽*/
                U.MT.UI.Picture.transformControl(U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum], 'scale(' + U.MT.UI.Picture.scalenum + ')'); /*给当前图片一个transform的属性*/
                U.MT.UI.Picture.checkscale = false; /*给上false，以表示放大了*/

            } else { //双击缩小

                U.MT.UI.Picture.transformControl(U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum], 'translate(0,0)', 'scale'); /*给当前图片一个transform的属性*/
                U.MT.UI.Picture.picmovedis[0] = 0; /*清除*/
                U.MT.UI.Picture.picmovedis[1] = 0; /*清除*/
                U.MT.UI.Picture.scalenum = 1; /*恢复默认这*/
                U.MT.UI.Picture.checkscale = true; /*给上true，以表示缩小了*/

            }
        }
    } else if (event.touches.length === 2) { /*点击屏幕手指的数量为2*/

        U.MT.UI.Picture.fingernum = 2; /*赋值点击屏幕手指的数量2*/
        U.MT.UI.Picture.start = U.MT.UI.Picture.getDistance(event.touches[0], event.touches[1]); /*计算出两个手指的直线距离*/

    }
}

/**
* 手指在屏幕中滑动
* @param moveEl 拖拽后需要移动的元素
* @param event 事件的状态
*/
U.MT.UI.Picture.touchMove = function (moveEl, event) {
    var event = event || window.event, _touch = event.targetTouches[0]; /*获取手指事件状态*/
    event.stopPropagation(); /*阻止冒泡事件*/

    if (U.MT.UI.Picture.fingernum === 2) { /*当点击屏幕手指的数量为2时*/

        U.MT.UI.Picture.now = U.MT.UI.Picture.getDistance(event.touches[0], event.touches[1]); /*计算移动时两个手指的直线距离*/
        var _magnification = (U.MT.UI.Picture.now / U.MT.UI.Picture.start - 1); /*计算出缩放倍数*/
        U.MT.UI.Picture.scalew = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientWidth * (_magnification + U.MT.UI.Picture.scalenum); /*刷新图片缩放后的长*/
        U.MT.UI.Picture.scaleh = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientHeight * (_magnification + U.MT.UI.Picture.scalenum); /*涮新图片缩放后的宽*/
        U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.transition = null; /*阻止拖动时产生的动画*/
        U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.webkitTransition = null; /*兼容*/
        U.MT.UI.Picture.transformControl(U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum], 'scale(' + (_magnification + U.MT.UI.Picture.scalenum) + ')'); /*给当前图片一个transform的属性*/
        U.MT.UI.Picture.checkscale = false; /*给上缩放检测false，以表示放大了，或缩小了*/

    } else if (U.MT.UI.Picture.fingernum === 1 && U.MT.UI.Picture.checkscale) { //没放大执行的内容

        U.MT.UI.Picture.slide(moveEl, U.MT.UI.Picture.disx, U.MT.UI.Picture.startx, event); /*左右切换图片*/

    } else if (U.MT.UI.Picture.fingernum === 1 && !U.MT.UI.Picture.checkscale) {//放大执行的内容

        var _mElTransform = moveEl.style.transform === "" ? 0 : parseInt(moveEl.style.transform.match(new RegExp(/[0-9-.]/ig)).join('')); /*获取移动元素的移动距离*/

        U.MT.UI.Picture.touchmovedisx = _touch.clientX - _mElTransform + U.MT.UI.Picture.picmovedis[0] - U.MT.UI.Picture.disx; /*X轴图片中心距*/
        U.MT.UI.Picture.touchmovedisy = _touch.clientY + U.MT.UI.Picture.picmovedis[1] - U.MT.UI.Picture.disy; /*Y轴图片中心距*/
        if (
                (Math.abs(U.MT.UI.Picture.touchmovedisx) > Math.abs((U.MT.UI.Picture.MTW - U.MT.UI.Picture.scalew) / 2) + U.MT.UI.Picture.MTW / 3) ||
                (U.MT.UI.Picture.rotatenum % 180 != 0 && Math.abs(U.MT.UI.Picture.touchmovedisx) > (Math.abs(U.MT.UI.Picture.MTW - U.MT.UI.Picture.scaleh) / 2) + U.MT.UI.Picture.MTW / 3) ||
                Math.abs(U.MT.UI.Picture.touchmovedisy) > U.MT.UI.Picture.scaleh / 1.5
                ) { /*若在横向把图片拖出屏幕的一半时，在纵向把图片拖出屏幕的3/2时*/

            U.MT.UI.Picture.checkscale = true; /*给上false，以表示缩小到正常的大小*/
            U.MT.UI.Picture.disx = U.MT.UI.Picture.currentnum * U.MT.UI.Picture.MTW + _touch.clientX; /*移动框X偏移量+点击屏幕的X距离*/
            U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.transform = ''; /*清空transform属性*/
            U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.webkitTransform = ''; /*清空transform属性*/
            U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.transition = 'transform .25s'; /*给上过渡动画属性*/
            U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.webkitTransition = 'transform .25s'; /*兼容*/
            U.MT.UI.Picture.rotatenum = 0; /*旋转数恢复成默认值*/
            U.MT.UI.Picture.scalenum = 1; /*缩放值恢复成默认值*/
            U.MT.UI.Picture.startx = _touch.clientX; /*重置点击屏幕的X距离*/

        } else {

            U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.transition = null; /*防止拖动图片时的过度动画*/
            U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.webkitTransition = null; /*兼容*/
            U.MT.UI.Picture.transformControl(U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum], 'translate(' + U.MT.UI.Picture.touchmovedisx + 'px,' + U.MT.UI.Picture.touchmovedisy + 'px)'); /*给当前图片一个transform的属性*/

        }
    }
}

/**
* 手指离开屏幕后触发
* @param moveEl拖拽后需要移动的书信
*/
U.MT.UI.Picture.touchEnd = function (moveEl) {
    var _mElTransform = moveEl.style.transform === "" ? 0 : parseInt(moveEl.style.transform.match(new RegExp(/[0-9-.]/ig)).join('')), /*获取移动元素的移动距离*/
        _diffX = U.MT.UI.Picture.touchstartx - _mElTransform, /*手指移动的距离*/
        _magnification = (U.MT.UI.Picture.now / U.MT.UI.Picture.start - 1); /*计算出缩放倍数*/
    U.MT.UI.Picture.touchMoveCheck(_diffX, moveEl); /*判断图片的中心局*/
    U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.transition = 'transform .25s'; /*给当前图片一个的过渡动画*/
    U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].style.webkitTransition = 'transform .25s'; /*兼容*/

    if (U.MT.UI.Picture.fingernum === 2) { /*点击屏幕手指的数量为2*/
        U.MT.UI.Picture.scalenum += _magnification; /*记录缩放倍数*/

        if (U.MT.UI.Picture.scalenum < 0.8) /*缩放倍数最小0.8*/
            U.MT.UI.Picture.scalenum = 0.8;
        else if (U.MT.UI.Picture.scalenum > 2.5) /*缩放倍数最大2.5*/
            U.MT.UI.Picture.scalenum = 2.5;

        U.MT.UI.Picture.transformControl(U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum], 'scale(' + U.MT.UI.Picture.scalenum + ')'); /*给当前图片一个transform的属性*/
        U.MT.UI.Picture.scalew = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientWidth * U.MT.UI.Picture.scalenum; /*刷新图片缩放的长*/
        U.MT.UI.Picture.scaleh = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].clientHeight * U.MT.UI.Picture.scalenum; /*刷新图片缩放的宽*/
    }

    if (!U.MT.UI.Picture.checkscale) { /*放大了*/

        U.MT.UI.Picture.picmovedis[0] = U.MT.UI.Picture.touchmovedisx; /*X图片中心距*/
        U.MT.UI.Picture.picmovedis[1] = U.MT.UI.Picture.touchmovedisy; /*Y图片中心距*/
        U.MT.UI.Picture.dragImgBoundary(U.MT.UI.Picture.picmovedis, U.MT.UI.Picture.scalew, U.MT.UI.Picture.scaleh); /*改变图片的位置*/

    } else { /*缩小了*/

        U.MT.UI.Picture.touchmovedisx = 0; /*恢复到初始*/
        U.MT.UI.Picture.touchmovedisy = 0; /*恢复到初始*/

    }
}

/**
*  图片拖动超过范围归为
* @param picMoveDis 图片相对中心移动
* @param scaleW  可移动的X范围
* @param scaleH 可移动的Y范围
*/
U.MT.UI.Picture.dragImgBoundary = function (picMoveDis, scaleW, scaleH) {
    /*   可移动的X范围                          可移动的Y范围*/
    var _outDisX = scaleW / 2 - U.MT.UI.Picture.MTW / 2, _outDisY = scaleH / 2 - U.MT.UI.Picture.MTH / 2;

    if (U.MT.UI.Picture.rotatenum % 180 == 0) { //图片横着的
        if (scaleW < U.MT.UI.Picture.MTW) { /*当图片的长小于屏幕的长时*/
            picMoveDis[0] = 0; /*图片位置恢复到中心*/
        } else {
            if (Math.abs(picMoveDis[0]) > Math.abs(_outDisX)) /*判断图片拖动是否超过可移动范围*/
                picMoveDis[0] = picMoveDis[0] > 0 ? _outDisX : -_outDisX; /*把图片拉回来*/
        }

        if (scaleH < U.MT.UI.Picture.MTH) { /*当图片的宽小于屏幕的宽时*/
            picMoveDis[1] = 0; /*图片位置恢复到中心*/
        } else {
            if (Math.abs(picMoveDis[1]) > Math.abs(_outDisY))  /*判断图片拖动是否超过可移动范围*/
                picMoveDis[1] = picMoveDis[1] > 0 ? _outDisY : -_outDisY; /*图片位置恢复到中心*/
        }
    } else { //图片竖着的
        if (scaleH < U.MT.UI.Picture.MTW) { /*当图片的宽小于屏幕的长*/
            picMoveDis[0] = 0; /*图片位置恢复到中心*/
        } else {
            if (Math.abs(picMoveDis[0]) > Math.abs(scaleH / 2 - U.MT.UI.Picture.MTW / 2)) /*判断图片拖动是否超过可移动范围*/
                picMoveDis[0] = picMoveDis[0] > 0 ? scaleH / 2 - U.MT.UI.Picture.MTW / 2 : -(scaleH / 2 - U.MT.UI.Picture.MTW / 2); /*图片位置恢复到中心*/
        }

        if (scaleW < U.MT.UI.Picture.MTH) {/*当图片的长小于屏幕的宽*/
            picMoveDis[1] = 0; /*图片位置恢复到中心*/
        } else {
            if (Math.abs(picMoveDis[1]) > Math.abs(scaleW / 2 - U.MT.UI.Picture.MTH / 2)) /*判断图片拖动是否超过可移动范围*/
                picMoveDis[1] = picMoveDis[1] > 0 ? scaleW / 2 - U.MT.UI.Picture.MTH / 2 : -(scaleW / 2 - U.MT.UI.Picture.MTH / 2); /*图片位置恢复到中心*/
        }
    }

    U.MT.UI.Picture.transformControl(U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum], 'translate(' + picMoveDis[0] + 'px,' + picMoveDis[1] + 'px)'); /*给当前图片一个transform的属性*/
}

/**
*  计算两点之间的距离
* @param p1 一个手指的数据
* @param p2  另一个手指的数据
* @returns {number} 返回出两个手指之间直线的距离
*/
U.MT.UI.Picture.getDistance = function (p1, p2) {
    var x = p2.pageX - p1.pageX, /*两个手指横坐标上的距离*/
            y = p2.pageY - p1.pageY; /*两个手指纵坐标上的距离*/

    return Math.sqrt((x * x) + (y * y)); /*勾股定理*/
}

/**
* 滑动切换
* @param moveEl 移动的元素
* @param _disX
* @param _slowDownX
*/
U.MT.UI.Picture.slide = function (moveEl, disX, startX, event) {
    var event = event || window.event, _touch = event.targetTouches[0], _mElX = moveEl.style.transform === "" ? 0 : parseInt(moveEl.style.transform.match(new RegExp(/[0-9-.]/ig)).join(''));
    if (0 > _mElX) /*判断在第一张图片是否向右滑动*/
            if (_mElX < -(moveEl.clientWidth - U.MT.UI.Picture.MTW)) { /*判断在最后一张图片是否向左滑动*/
                var _slowDownX = (startX - _touch.clientX) / 1.5 + (_touch.clientX - disX); /*每次滑动的距离少个 3/1 */
                U.MT.UI.Picture.transformControl(moveEl, 'translate(' + _slowDownX + 'px)');
            } else {
                U.MT.UI.Picture.transformControl(moveEl, 'translate(' + (_touch.clientX - disX) + 'px)'); /*默认移动*/
            }
    else {
        U.MT.UI.Picture.transformControl(moveEl, 'translate(' + (_touch.clientX - disX) / 3 + 'px)'); /*每次滑动的距离少个 3/1*/
    }
    event.stopImmediatePropagation(); /*阻止冒泡事件*/
}

/**
* 移动距离检测
* @param _diffX 手指移动的距离
* @param moveEl 移动的元素
*/
U.MT.UI.Picture.touchMoveCheck = function (diffX, moveEl) {
    var _pageNum = Math.round(diffX / U.MT.UI.Picture.MTW); /*跨几张图片数*/
    U.MT.UI.Picture.lastnum = U.MT.UI.Picture.currentnum; /*定义图片组的上一次的图片位置*/

    if (diffX >= 100 && _pageNum === 0) { /*移动距离大于100px，同时跨0张图片*/
        U.MT.UI.Picture.currentnum++; /*向右移动一张图片*/
        U.MT.UI.Picture.rotatenum = 0; /*恢复旋转数值*/
        U.MT.UI.Picture.scalenum = 1; /*恢复缩放值*/
    } else if (diffX <= -100 && _pageNum === 0) { /*移动距离小于-100px，同时跨0张图片*/
        U.MT.UI.Picture.currentnum--; /*向左移动一张图片*/
        U.MT.UI.Picture.rotatenum = 0; /*恢复旋转数值*/
        U.MT.UI.Picture.scalenum = 1; /*恢复缩放值*/
    } else if (Math.abs(_pageNum) > 0) {
        U.MT.UI.Picture.rotatenum = 0; /*恢复旋转数值*/
        U.MT.UI.Picture.scalenum = 1; /*恢复缩放值*/
    }

    U.MT.UI.Picture.currentnum = U.MT.UI.Picture.currentnum + _pageNum >= U.MT.UI.Picture.picarr.length - 1 ? U.MT.UI.Picture.picarr.length - 1 : U.MT.UI.Picture.currentnum + _pageNum; /*判断是否是最后一张图片*/
    U.MT.UI.Picture.currentnum = U.MT.UI.Picture.currentnum <= 0 ? 0 : U.MT.UI.Picture.currentnum; /*判断是否是第一张图片*/

    moveEl.style.transition = 'transform .25s'; /*给上动画过度属性*/
    moveEl.style.webkitTransition = 'transform .25s'; /*给上兼容*/
    U.MT.UI.Picture.transformControl(moveEl, 'translate(' + (-U.MT.UI.Picture.currentnum * U.MT.UI.Picture.MTW) + 'px)')
    U.MT.UI.Picture.downloadPic(U.MT.UI.Picture.download); /*更新下载图片的地址*/
}

/**
* 图片下载
* @param downLoadPic 下载图标元素
*/
U.MT.UI.Picture.downloadPic = function (downLoadPic) {
    /*获取图片的地址*/
    var imgSrc = U.MT.UI.Picture.pics[U.MT.UI.Picture.currentnum].getAttribute('src');
    if (U.MT.UI.Picture.browserIsIe()) {
        U.MT.UI.Picture.DownLoadReportIMG(imgSrc);
    } else {
        /*在给上href*/
        downLoadPic.setAttribute("href", imgSrc);
        /*给上下载按钮download H5属性，over！*/
        downLoadPic.setAttribute('download', imgSrc.toLowerCase().split('/').splice(-1)[0]);
        downLoadPic.setAttribute('target', 'view_window')
    }
}

/**
* 不支持donwload属性的下载兼容
* @param imgPathURL 图片地hi
* @constructor
*/
U.MT.UI.Picture.DownLoadReportIMG = function (imgPathURL) {
    //如果隐藏IFRAME不存在，则添加
    if (!document.getElementById("IframeReportImg"))
        $$('iframe', { style: { display: 'none' }, id: "IframeReportImg", name: "IframeReportImg", onload: "DoSaveAsIMG()", width: 0, height: 0, src: 'about:blank' }, document.body);
    if (document.all.IframeReportImg.src != imgPathURL) {
        //加载图片
        document.all.IframeReportImg.src = imgPathURL;
    } else {
        //图片直接另存为
        U.MT.UI.Picture.DoSaveAsIMG();
    }
}

/**
* 不支持donwload属性的下载兼容
* @constructor
*/
U.MT.UI.Picture.DoSaveAsIMG = function () {
    if (document.all.IframeReportImg.src != "about:blank")
        window.frames["IframeReportImg"].document.execCommand("SaveAs");
}

/**
* 判断是否为ie浏览器
* @returns {boolean}
*/
U.MT.UI.Picture.browserIsIe = function () {
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;
    else
        return false;
}

/**
* transform控制器
* @param _el 需要添加transform的元素
* @param _addAttr 添加的属性
* @param _delAttr 删除的属性
*/
U.MT.UI.Picture.transformControl = function (el, addAttr, delAttr) {
    var _attrArr = el.style.transform && el.style.transform.split(')'), /*获取该元素的transform属性值用')'分割成数组*/
            _addAttr = addAttr || null, /*若没有值给上null*/
            _delAttr = delAttr || null, /*若没有值给上null*/
            addAttrStr = (el.style.transform && _addAttr) && ((c = el.style.transform.match(new RegExp(_addAttr.split('(')[0]))) && c[0]), /*得到添加属性的名称*/
            str = '',
            _isinT; /*定义一个字符串*/

    if (!_attrArr) { /*若该元素没有transform属性*/
        el.style.transform = _addAttr; /*赋值*/
        el.style.webkitTransform = _addAttr; /*兼容*/
    } else {
        _attrArr.pop(); /*删除数组的最后一个元素*/
        if (!addAttrStr && _addAttr) /*若没有添加属性的名称 同时 有添加属性*/
            _attrArr.push(_addAttr); /*在属性数组加上添加的属性*/
        if (_addAttr && addAttrStr == 'translate') /*判断有添加属性 同时 添加属性的名称是translate， 在css3的transform中，一定先做移动，再干别的事情*/
            _attrArr.unshift(_addAttr); /*把属性丢到数组的最前面*/
        for (var _i = 0; _i < _attrArr.length; _i++) { /*循环数组*/
            _isinT = !str.match(new RegExp(_attrArr[_i].split('(')[0].trim())); /*判断准备添加的属性是否在字符串里面，trim()清除字符串里面的空格字符*/
            if (_attrArr[_i].match(new RegExp(addAttrStr)) && _isinT) { /*判断添加的属性在字符串里面出现了，则跳过，也称替换掉了*/
                str += _addAttr + ' ';
            } else if (!_attrArr[_i].match(new RegExp(_delAttr)) && _isinT) { /*判断删除的属性是否在字符串里面*/
                if (_attrArr[_i].substr(_attrArr[_i].length - 1, 1) != ")") { /*若属性最后一个字符不是')'则添加上')'*/
                    str += _attrArr[_i] + ') ';
                } else {
                    str += _attrArr[_i] + ' ';
                }
            }
        }
        el.style.transform = str; /*给上属性*/
        el.style.webkitTransform = str; /*兼容*/
    }
}