CocoRoboDesktop/js/Controls/Basic/Picture.js

Namespace.register("U.MD.UI.picture");

/**
* 图片控件调用接口函数
* @arr {Array || Object}  图片信息数组
* 形如：  
*   ['//img/1.jpg',
*   '//img/2.jpg',
*   '//img/3.jpg',
*   '//img/4.jpg',
*   '//img/5.jpeg',
*   '//img/6.jpg']
*/
U.MD.UI.picture = function (arr, startPicNum) {
    if ($('#U_MD_UI_PictureForm')[0]) { /*判断窗体是否存在*/
        if ($('#U_MD_UI_PictureForm')[0].style.display === 'none') /*重新将窗体显示到页面中*/
            U.selectEl('#U_MD_UI_PictureForm')[0].style.display = 'block';

        U.MD.UI.picture.DIVBOX = {
            "USERPICS": arr,
            "PICAREA": U.selectEl('#U_MD_UI_Picture_picArea')[0], /*获取拖拽的元素*/
            "PICBOX": U.selectEl('#U_MD_UI_Picture_picBox')[0], /*获取控件最外层元素*/
            'FA': U.selectEl('#U_MD_UI_Picture_fa')[0] /*获取功能栏目元素*/
        };

        U.MD.UI.picture.initloadPic(arr, startPicNum)
        return;
    }

    if (!arr.length)
        return

    U.MD.UI.picture.create(arr, startPicNum); /*创建控件的内容*/
    U.MD.UI.picture.DIVBOX.PICAREA.onmousedown = function (e) { U.MD.UI.picture.mDown(U.MD.UI.picture.DIVBOX.PICAREA, U.MD.UI.picture.DIVBOX.PICBOX, e) }
    U.MD.UI.picture.wheel(); /*定义滚轮事件*/
}

/*定义功能栏目的图片*/
U.MD.UI.picture.FA = [
{ src: "/img/pictureView/add.png", id: "U_MD_UI_Picture_add" }, //放大按钮图片素材
{src: "/img/pictureView/narrow.png", id: "U_MD_UI_Picture_narrow" },  //缩小按钮图片素材
{src: "/img/pictureView/prev.png", id: "U_MD_UI_Picture_prev" }, //上一张按钮图片素材
{src: "/img/pictureView/next.png", id: "U_MD_UI_Picture_next" }, //下一张按钮图片素材
{src: "/img/pictureView/turnLeft.png", id: "U_MD_UI_Picture_turnLeft" },  //左旋转按钮图片素材
{src: "/img/pictureView/turnRight.png", id: "U_MD_UI_Picture_turnRight"}  //右旋转按钮图片素材
];
U.MD.UI.picture.picnumber = 0; /*定义图片数*/
U.MD.UI.picture.rotatenum = 0; /*定义旋转数*/
U.MD.UI.picture.originalSize = [] /*定义原始图片尺寸大小的数组*/
U.MD.UI.picture.pics = []; /*定义存放图片的数组*/
U.MD.UI.picture.scalingvalue = 50; /*定义缩放大小单位：px*/
U.MD.UI.picture.focuspicsrc = ''; /*当前图片的src*/
U.MD.UI.picture.focuspicsize = ''; /*当前图片的文件大小*/

/**
* 图片控件创建函数
* @arr {Array || Object}  图片信息数组
*/
U.MD.UI.picture.create = function (arr, startPicNum) {

    var _c = $$('div', { style: { height: "100%", "overflow": "hidden" }, id: "U_MD_UI_Picture_bossBox" }); /*创建控件最外层元素*/

    var _box = $$('div', { id: "U_MD_UI_Picture_picBox", className: 'U_MD_UI_Picture_picBox' }, _c);

    $$('div', { id: 'U_MD_UI_Picture_picArea', className: 'U_MD_UI_Picture_picArea' }, _box); /*创建控件第二层元素，也是拖拽时所要触发的元素*/

    var _functionalarea = $$('div', { style: { height: "60px", width: "100%", position: "absolute", bottom: "0", "background-color": "#ffffff", "text-align": "center" }, id: "U_MD_UI_Picture_fa" }, _c); /*创建控件的功能栏目*/

    new U.UF.UI.form(
        "<span id='U_MD_UI_Picture_imgInfo'></span> - <span id='U_MD_UI_Picture_r'>100%</span>",
        _c,
        { style: { width: document.documentElement.clientWidth / 1.5 + 'px', height: document.documentElement.clientHeight / 1.5 + 'px', position: "absolute" }, id: "U_MD_UI_PictureForm" },
        { isdrag: true, isstretching: true, isenlarge: true, isclose: true, isnarrow: true },
        { style: { "padding": "10px", "background-color": "#22508c"} }
        ); /*调用窗体*/

    _box.style.height = _box.clientHeight - 60 + 'px'; /*让可拖拽区域的宽-60px*/

    // 全局属性
    U.MD.UI.picture.DIVBOX = {
        "USERPICS": arr,
        "PICAREA": U.selectEl('#U_MD_UI_Picture_picArea')[0], /*获取拖拽的元素*/
        "PICBOX": U.selectEl('#U_MD_UI_Picture_picBox')[0], /*获取控件最外层元素*/
        'FA': U.selectEl('#U_MD_UI_Picture_fa')[0] /*获取功能栏目元素*/
    };

    /*创建功能栏目子节点*/
    var _oDiv = $$('div', { style: { display: "inline-block", "line-height": "40px", "margin-top": "10px"} }, U.MD.UI.picture.DIVBOX.FA);
    /*循环功能栏目里面的图片*/
    for (var j = 0; j < U.MD.UI.picture.FA.length; j++) {
        /*创建span*/
        var _span = $$('span', { style: { "background-image": "url(" + U.MD.UI.picture.FA[j].src + ")", width: "40px", height: "40px", display: "inline-block", margin: "0 15px" }, id: U.MD.UI.picture.FA[j].id }, _oDiv);
    }


    U.MD.UI.picture.initloadPic(null, startPicNum);

    /*给上放大的点击事件*/
    U.selectEl('#U_MD_UI_Picture_add')[0].onclick = U.UF.C.apply(this, function () {
        this.changeSize(U.MD.UI.picture.scalingvalue, U.MD.UI.picture.rotatenum)
    });
    /*给上缩小的点击事件*/
    U.selectEl('#U_MD_UI_Picture_narrow')[0].onclick = U.UF.C.apply(this, function () {
        this.changeSize(-U.MD.UI.picture.scalingvalue, U.MD.UI.picture.rotatenum)
    });
    /*给上上一张图片的点击事件*/
    U.selectEl('#U_MD_UI_Picture_prev')[0].onclick = U.UF.C.apply(this, function () {
        this.prevPic(0)
    });
    /*给上下一张图片的点击事件*/
    U.selectEl('#U_MD_UI_Picture_next')[0].onclick = U.UF.C.apply(this, function () {
        this.prevPic(1)
    });
    /*给上左旋转的点击事件*/
    U.selectEl('#U_MD_UI_Picture_turnLeft')[0].onclick = U.UF.C.apply(this, function () {
        this.turn(1)
    });
    /*给上有旋转的点击事件*/
    U.selectEl('#U_MD_UI_Picture_turnRight')[0].onclick = U.UF.C.apply(this, function () {
        this.turn(0)
    });

    _c.onresize = function () {
        _box.style.height = _c.clientHeight - 60 + 'px';
    };
    _box.onresize = function () {
        U.MD.UI.picture.checkHeight();
    }
}

U.MD.UI.picture.initloadPic = function (arr, startPicNum) {

    if (arr) {
        U.MD.UI.picture.DIVBOX.PICAREA.innerHTML = "";
        U.MD.UI.picture.DIVBOX.PICAREA.style = null;
        U.MD.UI.picture.picnumber = startPicNum || 0; /*定义图片数*/
        U.MD.UI.picture.rotatenum = 0; /*定义旋转数*/
        U.MD.UI.picture.DIVBOX.USERPICS = arr
    } else {
        U.MD.UI.picture.picnumber = startPicNum >= 0 ? startPicNum : 0;
    }

    //调用创建方法
    U.MD.UI.picture.createPic();

    /*获取所有的图片并赋值*/
    U.MD.UI.picture.pics = U.selectEl('#U_MD_UI_Picture_picArea > ul > li > img');

    U.MD.UI.picture.pics[U.MD.UI.picture.picnumber].onload = U.UF.C.apply(this, function () {
        /*获取当前图片的原始大小并赋值*/
        this.originalSize = this.getImgNaturalDimensions(U.MD.UI.picture.pics[U.MD.UI.picture.picnumber]);
        /*调整大小，位置*/
        this.checkHeight();
    });
}

U.MD.UI.picture.createPic = function () {
    /*创建ul*/
    var _ul = $$('ul', { id: "ul" }, U.MD.UI.picture.DIVBOX.PICAREA);
    /*循环数据源*/
    for (var i = 0; i < U.MD.UI.picture.DIVBOX.USERPICS.length; i++) {
        /*创建li*/
        var _li = $$('li', {}, _ul);

        if (typeof U.MD.UI.picture.DIVBOX.USERPICS[i] === 'object') {
            /*如果是第一张，初始化控件一般都是第一张显示*/
            if (i === U.MD.UI.picture.picnumber) {
                $$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i].src }, _li);
                U.MD.UI.picture.focuspicsrc = U.MD.UI.picture.DIVBOX.USERPICS[i].src;
                if (U.MD.UI.picture.DIVBOX.USERPICS[i].size)
                    U.MD.UI.picture.focuspicsize = U.MD.UI.picture.DIVBOX.USERPICS[i].size;
            } else {
                $$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i].src, style: { display: "none"} }, _li);
            }
        } else if (typeof U.MD.UI.picture.DIVBOX.USERPICS[i] === 'string') {
            if (i === U.MD.UI.picture.picnumber) {
                /*如果是第一张，初始化控件一般都是第一张显示*/
                $$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i] }, _li);
                U.MD.UI.picture.focuspicsrc = U.MD.UI.picture.DIVBOX.USERPICS[i];
            }
            else {
                $$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i], style: { display: "none"} }, _li);
            }
        }
    }
}
/**
* 旋转检测
* @param num 为整数
* 如果是0也就是false，调用右旋转。如果是1也就是true，调用左旋转。因为有万恶的ie8，所以要滤镜旋转 0-0°，1-90°，2-180°，3-270°，如果需要任意角度旋转去学习阵矩。
*
*/
U.MD.UI.picture.turn = function (num) {
    /*判断是左旋，还是右旋，为什么要这么打应该晓得吧*/
    if (num) {
        U.MD.UI.picture.rotatenum--;
        U.MD.UI.picture.rotatenum < 0 ? U.MD.UI.picture.rotatenum = 3 : U.MD.UI.picture.rotatenum;
    } else {
        U.MD.UI.picture.rotatenum++;
        U.MD.UI.picture.rotatenum > 3 ? U.MD.UI.picture.rotatenum = 0 : U.MD.UI.picture.rotatenum;
    }
    U.MD.UI.picture.rotating();
}
/**
* 执行旋转
*/
U.MD.UI.picture.rotating = function () {
    /*定义常规游览器旋转属性字符*/
    var val = "rotate(" + U.MD.UI.picture.rotatenum * 90 + "deg)";
    /*U.MD.UI.picture.rotatenum % 2 !== 0 判断是否选转90°或者270°*/
    if (U.MD.UI.picture.rotatenum % 2 !== 0) {
        /*赋值大小，-20px是为了留间隙*/
        U.MD.UI.picture.DIVBOX.PICAREA.style.width = U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - 20 + 'px';
        /*开始旋转*/
        U.MD.UI.picture.compatibleRotate(U.MD.UI.picture.DIVBOX.PICAREA, val);
        /*调整位置*/
        U.MD.UI.picture.DIVBOX.PICAREA.style.top = (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2) + 10 + 'px';
        /*调整位置，以至于中心缩放*/
        U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / 2 + 'px';
        /*检测是否是ie8 or ie7*/
        if ((navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") || (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7.")) {
            U.MD.UI.picture.DIVBOX.PICAREA.style.top = "10px";
            U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2 + 'px';
        }
    } else {
        /*清空拖拽元素的style*/
        U.MD.UI.picture.DIVBOX.PICAREA.setAttribute('style', '');
        /*开始旋转*/
        U.MD.UI.picture.compatibleRotate(U.MD.UI.picture.DIVBOX.PICAREA, val);
        /*改变长度*/
        U.MD.UI.picture.DIVBOX.PICAREA.style.width = U.MD.UI.picture.originalSize[0] > U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + 150 ? '1290px' : U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + 150;
        /*调整图片大小*/
        U.MD.UI.picture.checkHeight();
    }
    /*改变左上角的title的缩放比*/
    U.selectEl('#U_MD_UI_Picture_r')[0].innerText = Math.round((U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / U.MD.UI.picture.originalSize[1]) * 100) + '%';
}
/**
* 兼容旋转
* @param el 旋转的元素
* @param val 旋转的属性值
*/
U.MD.UI.picture.compatibleRotate = function (el, val) {

    //定义属性
    el.style.webkitTransform = val;
    el.style.MozTransform = val;
    el.style.mturnsTransform = val;
    el.style.OTransform = val;
    el.style.transform = val;

    /*检测是否是ie8 or ie7*/
    if ((navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") || (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7."))
        el.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + Math.abs(U.MD.UI.picture.rotatenum) + ")";
}
/**
* 图片切换
* @param num 整数orTRUE,FALSE
* true代表下一张，false代表上一张
*/
U.MD.UI.picture.prevPic = function (num) {
    /*在切换图片先把正在显示的图片隐藏掉*/
    U.MD.UI.picture.pics[U.MD.UI.picture.picnumber].style.display = 'none';
    if (num) {
        /*图片位置数++*/
        U.MD.UI.picture.picnumber++;
        /*如果是最后一张，跳到第一张*/
        if (U.MD.UI.picture.picnumber > U.MD.UI.picture.pics.length - 1)
            U.MD.UI.picture.picnumber = 0;
    } else {
        /*图片位置数--*/
        U.MD.UI.picture.picnumber--;
        /*如果是第一张，跳到最后一张*/
        if (U.MD.UI.picture.picnumber < 0)
            U.MD.UI.picture.picnumber = U.MD.UI.picture.pics.length - 1;
    }
    if (U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].size)
        U.MD.UI.picture.focuspicsize = U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].size;
    if (U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].src)
        U.MD.UI.picture.focuspicsrc = U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].src;
    /*显示需要显示的图片*/
    U.MD.UI.picture.pics[U.MD.UI.picture.picnumber].style.display = 'block';
    /*获取该图片的初始大小*/
    U.MD.UI.picture.originalSize = U.MD.UI.picture.getImgNaturalDimensions(U.MD.UI.picture.pics[U.MD.UI.picture.picnumber]);
    /*清空拖拽元素的style值*/
    U.MD.UI.picture.DIVBOX.PICAREA.setAttribute('style', '');
    /*调整大小，位置*/
    U.MD.UI.picture.checkHeight();
    /*旋转数初始0*/
    U.MD.UI.picture.rotatenum = 0;
}
/**
* 功能：调整图片的大小，图片居中显示，改变左上角的title缩放比例
*/
U.MD.UI.picture.checkHeight = function () {
    /*长宽比例*/
    var _proportion = U.MD.UI.picture.originalSize[0] / U.MD.UI.picture.originalSize[1];
    /*如果原始图片的宽比显示框的宽要大，进行调整*/
    if (U.MD.UI.picture.originalSize[1] > U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - 40 || U.MD.UI.picture.originalSize[0] > U.MD.UI.picture.DIVBOX.PICBOX.clientWidth) {
        /*-40px上下留白*/
        U.MD.UI.picture.DIVBOX.PICAREA.style.width = Math.floor((U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - 40) * _proportion) + 'px';
    } else {
        /*原比例显示*/
        U.MD.UI.picture.DIVBOX.PICAREA.style.width = U.MD.UI.picture.originalSize[0] + 'px';
        //U.MD.UI.picture.DIVBOX.PICAREA.style.height = U.MD.UI.picture.originalSize[1] + 'px';
    }
    /*居中显示*/
    U.MD.UI.picture.DIVBOX.PICAREA.style.left = (U.MD.UI.picture.DIVBOX.PICBOX.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
    U.MD.UI.picture.DIVBOX.PICAREA.style.top = (U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';

    if (typeof U.MD.UI.picture.DIVBOX.USERPICS[0] === 'object')
        U.selectEl('#U_MD_UI_Picture_imgInfo')[0].innerText = U.MD.UI.picture.focuspicsrc.toLowerCase().split('/').splice(-1)[0] + "(" + U.MD.UI.picture.originalSize[0] + "*" + U.MD.UI.picture.originalSize[1] + "px " + U.MD.UI.picture.focuspicsize + ")";
    else if (typeof U.MD.UI.picture.DIVBOX.USERPICS[0] === 'string')
        U.selectEl('#U_MD_UI_Picture_imgInfo')[0].innerText = U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].toLowerCase().split('/').splice(-1)[0] + "(" + U.MD.UI.picture.originalSize[0] + "*" + U.MD.UI.picture.originalSize[1] + "px)";
    U.selectEl('#U_MD_UI_Picture_r')[0].innerText = Math.round((U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / U.MD.UI.picture.originalSize[1]) * 100) + '%';
}
/**
* 获取图片的原来的大小
* @param img
* @returns {*[]} 返回值1：原始长度，值2：原始宽度
*/
U.MD.UI.picture.getImgNaturalDimensions = function (img) {
    var nWidth, nHeight;
    if (img.naturalWidth) { // 现代浏览器
        nWidth = img.naturalWidth;
        nHeight = img.naturalHeight
    } else { // IE6/7/8
        var image = new Image();
        image.src = img.src;
        nWidth = image.width;
        nHeight = image.height;
    }
    return [nWidth, nHeight]
}
/**
* 拖拽
* @param dragEl 拖拽的元素
* @param bossEl 拖拽限制的范围元素
*/
U.MD.UI.picture.drag = function (dragEl, bossEl) {
    dragEl.onmousedown = function (e) {
        U.MD.UI.picture.mDown(dragEl, bossEl, e)
    }
}


/**
* 点击图片所触发的事件
* @param  {[object]} dragEl [拖拽的元素]
* @param  {[object]} bossEl [拖拽限制的范围元素]
* @param  {[event]} e      []
*/
U.MD.UI.picture.mDown = function (dragEl, bossEl, e) {
    e = e || window.event;

    /*定义拖拽元素到父级的X距离*/
    var _distanceX = e.clientX - dragEl.offsetLeft;
    /*定义拖拽元素到父级的Y距离*/
    var _distanceY = e.clientY - dragEl.offsetTop;
    bossEl.onmousemove = function (e) {
        U.MD.UI.picture.mMove(dragEl, bossEl, _distanceX, _distanceY, e);
    }
    /*鼠标放开，移除事件*/
    bossEl.onmouseup = function (e) {
        bossEl.onmousemove = null;
        bossEl.onmouseup = null;
    };
    /*禁用默认事件*/
    if (e.preventDefault) {
        /*常规游览器*/
        e.preventDefault();
    } else {
        /*ie8*/
        dragEl.ondragstart = function () {
            return false;
        };
        dragEl.onselectstart = function () {
            return false;
        };
    }
}

/**
* 点击拖动图片时触发的事件
* @param  {[object]} dragEl     [拖拽的元素]
* @param  {[object]} bossEl     [拖拽限制的范围元素]
* @param  {[object]} _distanceX [拖拽元素到父级的X距离]
* @param  {[object]} _distanceY [拖拽元素到父级的Y距离]
* @param  {[event]} e          []
*/
U.MD.UI.picture.mMove = function (dragEl, bossEl, _distanceX, _distanceY, e) {
    e = e || window.event;
    /*移动距离*/
    var _left = e.clientX - _distanceX,
        _top = e.clientY - _distanceY;
    /*判断是否是最顶部，默认显示窗体宽的1/8*/
    _left = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.min(bossEl.clientWidth - bossEl.clientWidth / 8, _left) : Math.min(bossEl.clientWidth - bossEl.clientWidth / 8 - dragEl.clientWidth / 2 + dragEl.clientHeight / 2, _left);
    /*判断是否是最底部，默认显示窗体宽的1/8*/
    _left = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.max(-dragEl.clientWidth + bossEl.clientWidth / 8, _left) : Math.max(-dragEl.clientWidth + bossEl.clientWidth / 8 + dragEl.clientWidth / 2 - dragEl.clientHeight / 2, _left);
    /*判断是否是最左部，默认显示窗体长的1/8*/
    _top = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.min(bossEl.clientHeight - bossEl.clientHeight / 8, _top) : Math.min(bossEl.clientHeight - bossEl.clientHeight / 8 + (dragEl.clientWidth - dragEl.clientHeight) / 2, _top);
    /*判断是否是最右部，默认显示窗体长的1/8*/
    _top = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.max(-dragEl.clientHeight + bossEl.clientHeight / 8, _top) : Math.max(-dragEl.clientHeight + bossEl.clientHeight / 8 - (dragEl.clientWidth - dragEl.clientHeight) / 2, _top);
    /*赋值*/
    dragEl.style.left = _left + 'px';
    dragEl.style.top = _top + 'px';
}

/**
* 滚轮事件
*/
U.MD.UI.picture.wheel = function () {
    U.MD.UI.picture.DIVBOX.PICBOX.onmousewheel = function () {
        this.getWheelDalta()
    } .bind(this);
}

/**
* 滚轮事件
* @param e
*/
U.MD.UI.picture.getWheelDalta = function (e) {
    e = e || window.event;
    var delta = 0;
    // delta的返回值为正时，表示向前滚动；delta的返回值为负时，表示向后滚动；
    if (e.wheelDelta) {
        // IE中，鼠标滚轮信息存放在wheelDelta属性中；向前滚动时，wheelDelta的值是120的倍数；向后滚动时，wheelDelta的值是-120的倍数；
        delta = e.wheelDelta / 120;
        if (window.opera) delta = -delta;
    } else if (e.detail) {
        // Firefox的鼠标滚轮信息存放在detail属性中；向前滚动，detail的值是-3的倍数；向后滚动，detail的值是3的倍数；
        delta = -e.detail / 3;
    }
    // 执行滚轮事件函数
    if (delta > 0) {
        U.MD.UI.picture.changeSize(U.MD.UI.picture.scalingvalue);
    } else {
        U.MD.UI.picture.changeSize(-U.MD.UI.picture.scalingvalue);
    }

    // 阻止默认行为，防止当页面本身就存在滚动条时出现的异常
    prevent(event);

    function prevent(evt) {
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
    }
}
/**
* 改变图片大小
* @param multiple 缩放大小
*/
U.MD.UI.picture.changeSize = function (multiple) {
    /*添加缩放后， 添加缩放前的宽， 添加缩放前的长*/
    var _addOver, _afterH, _afterW;

    /*赋值*/
    _afterH = U.MD.UI.picture.DIVBOX.PICAREA.clientHeight;
    _afterW = U.MD.UI.picture.DIVBOX.PICAREA.clientWidth;
    _addOver = U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + multiple;
    /*最小缩放长400px*/
    if ((_addOver / U.MD.UI.picture.originalSize[0]) * 100 < 20 && _addOver < 200) {
        return;
    } else if (((U.MD.UI.picture.DIVBOX.PICAREA.clientHeight + multiple) / U.MD.UI.picture.originalSize[1]) * 100 > 1000) { /*最大缩放1000%*/
        return
    }
    /*赋值长*/
    U.MD.UI.picture.DIVBOX.PICAREA.style.width = _addOver + 'px';

    /*中心缩放*/
    U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop - (U.MD.UI.picture.DIVBOX.PICAREA.clientHeight - _afterH) / 2 + 'px';
    U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft - multiple / 2 + 'px';

    /*ie8，7,中心缩放位移*/
    if (((navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") || (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7.")) && U.MD.UI.picture.rotatenum % 2 !== 0) {
        U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2 + 'px';
        U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / 2 + 'px';
    }

    /*下面都是防止缩放时偏移到窗体外面*/
    var topY = U.MD.UI.picture.DIVBOX.PICAREA.clientHeight + U.MD.UI.picture.DIVBOX.PICAREA.offsetTop <= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8 ||
    ((U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + U.MD.UI.picture.DIVBOX.PICAREA.offsetTop <= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8) && U.MD.UI.picture.rotatenum % 2 !== 0),

    bottomY = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop >= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8 ||
    ((Math.abs(U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 - U.MD.UI.picture.DIVBOX.PICAREA.offsetTop) <= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8) && U.MD.UI.picture.rotatenum % 2 !== 0),

    leftX = U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft <= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 ||
    (U.MD.UI.picture.DIVBOX.PICAREA.clientHeight + (U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft + (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2) <= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 && U.MD.UI.picture.rotatenum % 2 !== 0),

    rightX = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft >= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth - U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 ||
    ((U.MD.UI.picture.DIVBOX.PICBOX.clientWidth - (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 - U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft) <= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 && U.MD.UI.picture.rotatenum % 2 !== 0);


    if (topY) {
        if (U.MD.UI.picture.rotatenum % 2 === 0) {
            U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop + (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
        } else {
            U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop + (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
        }
    }

    if (bottomY) {
        if (U.MD.UI.picture.rotatenum % 2 === 0) {
            U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop - (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
        } else {
            U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop - (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
        }
    }

    if (leftX) {
        if (U.MD.UI.picture.rotatenum % 2 === 0) {
            U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft + (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
        } else {
            U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft + (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
        }
    }

    if (rightX) {
        if (U.MD.UI.picture.rotatenum % 2 === 0) {
            U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft - (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
        } else {
            U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft - (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
        }
    }

    U.selectEl('#U_MD_UI_Picture_r')[0].innerText = Math.floor((U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / U.MD.UI.picture.originalSize[0]) * 100) + '%';
}