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; /*兼容*/
}
}