/*
|
* 预览图片 Object
|
* 2015-05-23 17:25
|
*
|
*/
|
import request from '@/router/axios';
|
|
|
export const ImagePreview = () => {
|
var that = this;
|
//用来存储图片数据
|
var IMGS = {
|
"num": 0,
|
"imgs": {}
|
};
|
var IMGP_BG = null;
|
var IMGP_P_BG = null;
|
var IMGSHOW_BG = null;
|
var IMGSHOW_BOX = null;
|
var IMGSHOW_NEXT = null;
|
var IMGSHOW_LAST = null;
|
var IMGSHOW_CLOSE = null;
|
var FullScreen = null;
|
var IMGSHOW_NOW = null;
|
var IMGP_BOX = null;
|
var IMGP_IMGS = null;
|
var IMGP_NEXT = null;
|
var IMGP_LAST = null;
|
var IMGP_HTML = "";
|
var nowNum = 0; //当前预览图片序号
|
var moveW = 0;
|
var isFullscreen = false;
|
_start();
|
//初始化获得图片数据
|
this.Image = function(imgObjBox) {
|
|
var len = imgObjBox.children.length;
|
IMGP_HTML = "";
|
for (var i = 0; i < len; i++) {
|
IMGS["imgs"][i] = { "src": '' }
|
IMGS["imgs"][i]["src"] = imgObjBox.children[i].firstElementChild.src;
|
IMGP_HTML += '<div class="imgp_k"><img data-num="' + i + '"src="' + imgObjBox.children[i].firstElementChild.src + '" class="imgp"/></div>';
|
}
|
IMGS["num"] = len;
|
IMGP_IMGS.innerHTML = IMGP_HTML;
|
IMGP_IMGS.style.width = len * (100 + 7) + "px";
|
IMGSHOW_NOW.src = IMGS["imgs"][0]["src"]; //显示第一张图片
|
IMGP_IMGS.onclick = function(e) {
|
//获取data-num
|
var n = e.target.dataset.num; //ie不识别
|
if (n) {
|
nowNum = n;
|
that.show(nowNum);
|
}
|
}
|
}
|
IMGP_BG.onmousewheel = function(e) {
|
//存在兼容性
|
//console.log(e.wheelDelta+" "+e.detail);
|
return false;
|
}
|
//显示图片
|
this.show = function(n) {
|
nowNum = n;
|
IMGP_BG.style.display = "block";
|
IMGSHOW_NOW.src = IMGS["imgs"][n]["src"];
|
}
|
//预览下一张
|
IMGSHOW_NEXT.onclick = function() {
|
nowNum++;
|
if (nowNum > (IMGS["num"] - 1)) {
|
nowNum = 0;
|
}
|
that.show(nowNum);
|
}
|
//预览上一张
|
IMGSHOW_LAST.onclick = function() {
|
nowNum--;
|
if (nowNum < 0) {
|
nowNum = IMGS["num"] - 1;
|
}
|
that.show(nowNum);
|
}
|
//关闭预览
|
IMGSHOW_CLOSE.onclick = function() {
|
exitFullscreen();
|
isFullscreen = false;
|
document.body.style.overflow = "auto";
|
IMGP_BG.style.display = "none";
|
}
|
FullScreen.onclick = function() {
|
if (isFullscreen == false) {
|
//进入全屏
|
isFullscreen = true;
|
requestFullScreen();
|
FullScreen.className = "isFullScreen";
|
document.body.style.overflow = "hidden";
|
} else {
|
//退出全屏
|
isFullscreen = false;
|
exitFullscreen();
|
FullScreen.className = "notFullScreen";
|
document.body.style.overflow = "auto";
|
}
|
}
|
IMGP_NEXT.onclick = function() {
|
var w_bg = IMGP_BOX.offsetWidth;
|
var w = IMGP_IMGS.offsetWidth;
|
var L = -IMGP_IMGS.offsetLeft;
|
var wr = w - (L + w_bg);
|
var moveL = wr > w_bg ? w_bg : wr;
|
console.log(w_bg + " " + w + " " + L + " " + moveL + " " + wr);
|
if (wr == 0) {
|
IMGP_IMGS.style.left = 0 + "px";
|
} else {
|
IMGP_IMGS.style.left = -(L + moveL) + "px";
|
}
|
}
|
IMGP_LAST.onclick = function() {
|
var w_bg = IMGP_BOX.offsetWidth;
|
var w = IMGP_IMGS.offsetWidth;
|
var L = -IMGP_IMGS.offsetLeft;
|
var wl = L;
|
var moveL = wl > w_bg ? w_bg : wl;
|
console.log(w_bg + " " + w + " " + L + " " + moveL + " " + wl);
|
if (wl == 0) {
|
IMGP_IMGS.style.left = -(w - w_bg) + "px";
|
} else {
|
IMGP_IMGS.style.left = -(L - moveL) + "px";
|
}
|
|
}
|
|
function _start() {
|
//创建预览照片盒子
|
IMGP_BG = document.createElement("div");
|
IMGP_BG.id = "IMGP_BG";
|
document.body.appendChild(IMGP_BG);
|
//大图预览背景
|
IMGSHOW_BG = document.createElement("div");
|
IMGSHOW_BG.id = "IMGSHOW_BG";
|
IMGP_BG.appendChild(IMGSHOW_BG);
|
//大图预览盒子
|
IMGSHOW_BOX = document.createElement("div");
|
IMGSHOW_BOX.id = "IMGSHOW_BOX";
|
IMGSHOW_BG.appendChild(IMGSHOW_BOX);
|
//大图预览按钮下
|
IMGSHOW_NEXT = document.createElement("div");
|
IMGSHOW_NEXT.id = "IMGSHOW_NEXT";
|
IMGSHOW_BG.appendChild(IMGSHOW_NEXT);
|
//大图预览按钮上
|
IMGSHOW_LAST = document.createElement("div");
|
IMGSHOW_LAST.id = "IMGSHOW_LAST";
|
IMGSHOW_BG.appendChild(IMGSHOW_LAST);
|
//大图预览按钮关闭
|
IMGSHOW_CLOSE = document.createElement("div");
|
IMGSHOW_CLOSE.id = "IMGSHOW_CLOSE";
|
IMGSHOW_BG.appendChild(IMGSHOW_CLOSE);
|
//全屏控制按钮
|
FullScreen = document.createElement("div");
|
FullScreen.id = "FullScreen";
|
FullScreen.className = "notFullScreen";
|
IMGSHOW_BG.appendChild(FullScreen);
|
//正在预览
|
IMGSHOW_NOW = document.createElement("img");
|
IMGSHOW_NOW.id = "IMGSHOW_NOW";
|
IMGSHOW_BOX.appendChild(IMGSHOW_NOW);
|
//--------------------------------
|
//创建待预览图片背景
|
IMGP_P_BG = document.createElement("div");
|
IMGP_P_BG.id = "IMGP_P_BG";
|
IMGP_BG.appendChild(IMGP_P_BG);
|
//创建待预览图片盒子背景
|
IMGP_BOX = document.createElement("div");
|
IMGP_BOX.id = "IMGP_BOX";
|
IMGP_P_BG.appendChild(IMGP_BOX);
|
//创建待预览图片盒子
|
IMGP_IMGS = document.createElement("div");
|
IMGP_IMGS.id = "IMGP_IMGS";
|
IMGP_BOX.appendChild(IMGP_IMGS);
|
//创建待预览盒子按钮上
|
IMGP_LAST = document.createElement("div");
|
IMGP_LAST.id = "IMGP_LAST";
|
IMGP_P_BG.appendChild(IMGP_LAST);
|
//创建待预览盒子按钮下
|
IMGP_NEXT = document.createElement("div");
|
IMGP_NEXT.id = "IMGP_NEXT";
|
IMGP_P_BG.appendChild(IMGP_NEXT);
|
|
var bodyW = document.documentElement.clientHeight;
|
IMGSHOW_BG.style.height = (bodyW) / bodyW * 100 + "%";
|
IMGSHOW_BOX.style.lineHeight = (bodyW - 5) + "px";
|
IMGSHOW_NEXT.style.top = ((bodyW) - 400) / 2 + "px";
|
IMGSHOW_LAST.style.top = ((bodyW) - 400) / 2 + "px";
|
///IMGSHOW_NOW.src="./Uploads/3.0_banner.jpg"
|
}
|
window.onresize = function() {
|
var bodyW = document.documentElement.clientHeight;
|
IMGSHOW_BG.style.height = (bodyW) / bodyW * 100 + "%";
|
IMGSHOW_BOX.style.lineHeight = (bodyW - 5) + "px";
|
IMGSHOW_NEXT.style.top = ((bodyW) - 400) / 2 + "px";
|
IMGSHOW_LAST.style.top = ((bodyW) - 400) / 2 + "px";
|
}
|
|
function _setCss(obj, css) {
|
for (var v in css) {
|
obj.style[v] = css[v];
|
}
|
}
|
//进入全屏
|
function requestFullScreen() {
|
var de = document.documentElement;
|
if (de.requestFullscreen) {
|
de.requestFullscreen();
|
} else if (de.mozRequestFullScreen) {
|
de.mozRequestFullScreen();
|
} else if (de.webkitRequestFullScreen) {
|
de.webkitRequestFullScreen();
|
}
|
}
|
//退出全屏
|
function exitFullscreen() {
|
var de = document;
|
if (de.exitFullscreen) {
|
de.exitFullscreen();
|
} else if (de.mozCancelFullScreen) {
|
de.mozCancelFullScreen();
|
} else if (de.webkitCancelFullScreen) {
|
de.webkitCancelFullScreen();
|
}
|
}
|
|
}
|
