原生js 图片查看器

将以前用angular 写的自定义指令封装成插件，无需引用jquery、angular。

下载下来即可查看效果。

github网址: GitHub - wzhGitH/imgView: js 图片查看器,H5图片预览(imgView)

百度云下载链接: 百度网盘请输入提取码密码: gidq

可实现放大、缩小、拖拽、旋转、上一张、下一张.

样子是这样的

用原生js写的图片查看器，可旋转、放大、上一张、下一张和拖拽.无需引用jquery.

参数值需要传入图片数组、跟当前点击的图片即可

代码使用

var options = {dataList: dataList,   // 图片数组currentSrc: src       // 当前要显示的图片
}// 使用
ImgView("imgView", options);

最主要的ImgView.js

(function(window, document) {var ImgView = function(targetDom, options) {// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了  if (!(this instanceof ImgView)) return new ImgView(targetDom, options);// 参数this.options = this.extend({dataList: [],currentSrc: ""}, options);// 获取domthis.targetDom = document.getElementById(targetDom);var html = "<div id='imgViewDiv' class='img-view-dialog'>" +"<div id='imgViewContent' class='img-view-content' draggable>" +"<img id='dialogImg' class='dialog-img' src=''></div>" +"<div class='dialog-tool'><i id='closeDialog' class='close-dialog'></i>" +"<i id='rotateDialog' class='rotate-dialog'></i><i id='prevDialog' class='previous-dialog'></i>" +"<i id='nextDialog' class='next-dialog'></i></div></div>";this.targetDom.innerHTML = html;this.btnClose = document.getElementById("closeDialog");this.btnRotate = document.getElementById("rotateDialog");this.btnPrev = document.getElementById("prevDialog");this.btnNext = document.getElementById("nextDialog");this.imgViewDiv = document.getElementById("imgViewDiv");this.imgViewContent = document.getElementById("imgViewContent");this.dialogImg = document.getElementById("dialogImg");this.num = 0;this.winWidth = 0;this.winHeight = 0;this.startX = 0, this.startY = 0, this.x = 0, this.y = 0;this.index = 1;this.event();}ImgView.prototype = {init: function() {this.event();},extend: function(obj, obj2) {for (var k in obj2) {obj[k] = obj2[k];}return obj;},event: function() {var _this = this;_this.thisSrc = _this.options.currentSrc;var dataList = _this.options.dataList;var index = dataList.indexOf(_this.thisSrc);_this.checkImg(_this.options.currentSrc, index);// 关闭_this.btnClose.addEventListener("click", function() {_this.close(_this);});// 旋转_this.btnRotate.addEventListener("click", function() {_this.rotate(_this);});// 上一张_this.btnPrev.addEventListener("click", function() {_this.prev(_this);});// 下一张_this.btnNext.addEventListener("click", function() {_this.next(_this);});// 鼠标按下_this.imgViewContent.addEventListener("mousedown", function(event) {_this.mousedown(_this, event);});// 滚轮事件 chrome & ie_this.imgViewContent.addEventListener("mousewheel", function(event) {_this.mousewheel(_this, event);});// 滚轮事件 firefox_this.imgViewContent.addEventListener("DOMMouseScroll", function(event) {_this.mousewheel(_this, event);});},// 滚轮事件mousewheel: function(_this, event) {event.preventDefault();var delta = (event.wheelDelta && (event.wheelDelta > 0 ? 1 : -1)) || // chrome & ie(event.detail != 0 && (event.detail > 0 ? -1 : 1));if (delta > 0) {// 向上滚_this.index = _this.index + 0.1;if (_this.index > 4) {_this.index = 4;}} else if (delta < 0) {// 向下滚_this.index = _this.index - 0.1;if (_this.index < 0.1) {_this.index = 0.1;}}_this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px";_this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px";event.target.style.width = _this.imgWidth * _this.index + "px";event.target.style.height = _this.imgHeight * _this.index + "px";},// 鼠标按下事件(拖拽用)mousedown: function(_this, event) {event.preventDefault();var imgWidth = _this.imgWidth * _this.index;var imgHeight = _this.imgHeight * _this.index;var rotateNum = _this.num * 90;// 根据旋转的角度不同，坐标也不一样if (rotateNum % 90 == 0 && rotateNum % 180 != 0 && rotateNum % 270 != 0 && rotateNum % 360 != 0) {_this.startX = (imgWidth - imgHeight) / 2 + imgHeight - event.offsetY;_this.startY = event.offsetX - (imgWidth - imgHeight) / 2;} else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) {_this.startX = imgWidth - event.offsetX;_this.startY = imgHeight - event.offsetY;} else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) {_this.startX = (imgWidth - imgHeight) / 2 + event.offsetY;_this.startY = imgWidth - event.offsetX - (imgWidth - imgHeight) / 2;} else {_this.startX = event.offsetX;_this.startY = event.offsetY;}document.addEventListener('mousemove', mousemove);document.addEventListener('mouseup', mouseup);// 拖拽function mousemove(event) {_this.y = event.clientY - _this.startY - 10;_this.x = event.clientX - _this.startX - 10;_this.imgViewContent.style.marginTop = "" + _this.y + "px";_this.imgViewContent.style.marginLeft = "" + _this.x + "px";_this.imgViewContent.style.transition = "margin 0s";};// 鼠标放开function mouseup() {document.removeEventListener('mousemove', mousemove);document.removeEventListener('mouseup', mouseup);_this.imgViewContent.style.transition = "all 0.6s";}},// 关闭close: function(_this) {var imgViewDiv = document.getElementById("imgViewDiv");imgViewDiv.setAttribute("class", "img-view-dialog closing");setTimeout(function() {imgViewDiv.setAttribute("class", "img-view-dialog");imgViewDiv.style.display = "none";_this.num = 0;}, 400);},// 旋转rotate: function(_this) {_this.num++;_this.imgViewContent.style.transform = "rotate(" + _this.num * 90 + "deg) scale(1, 1)";},// 上一张prev: function(_this) {var dialogImg = document.getElementById("dialogImg");var thisSrc = dialogImg.attributes[2].value;if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {thisSrc = dialogImg.attributes[3].value;}var dataList = _this.options.dataList;var index = dataList.indexOf(thisSrc);if (index > 0 && index <= (dataList.length - 1)) {index = index - 1;_this.checkImg(dataList[index], index);}},// 下一张next: function(_this) {var dialogImg = document.getElementById("dialogImg");var thisSrc = dialogImg.attributes[2].value;if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {thisSrc = dialogImg.attributes[3].value;}var dataList = _this.options.dataList;var index = dataList.indexOf(thisSrc);if (index >= 0 && index < (dataList.length - 1)) {index = index + 1;_this.checkImg(dataList[index], index);}},// 点击图片checkImg: function(thisSrc, index) {var _this = this;_this.index = 1;_this.num = 0;_this.dialogImg.style.transform = "";_this.imgViewContent.setAttribute("class", "img-view-content");_this.getWindowWH();if (index == 0) {_this.btnPrev.style.display = "none";} else if (index == (dataList.length - 1)) {_this.btnNext.style.display = "none";} else {_this.btnPrev.style.display = "block";_this.btnNext.style.display = "block";}var image = new Image();image.src = thisSrc;var width = image.width;var height = image.height;var ww = 860;var wh = _this.winHeight - 20;if (width < ww && height < wh) {width = width;height = height;} else {var scale_x = width / ww;var scale_y = height / wh;if (scale_x > scale_y) {var width = ww;var height = parseInt(height / scale_x);} else {var width = parseInt(width / scale_y);var height = wh;}}_this.imgWidth = width;_this.imgHeight = height;var left = (_this.winWidth - width) / 2;var top = (_this.winHeight - height) / 2;_this.imgMarginLeft = left;_this.imgMarginTop = top;_this.imgViewContent.style.cssText = "margin-top:" + top + "px; margin-left:" + left + "px";_this.dialogImg.style.cssText = "width:" + width + "px; height:" + height + "px;";setTimeout(function() {_this.dialogImg.setAttribute("src", thisSrc);_this.imgViewContent.setAttribute("class", "img-view-content loadingImg");}, 600);},// 获取浏览器宽高getWindowWH: function() {var _this = this;if (window.innerWidth)_this.winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))_this.winWidth = document.body.clientWidth;// 获取窗口高度if (window.innerHeight)_this.winHeight = window.innerHeight;else if ((document.body) && (document.body.clientHeight))_this.winHeight = document.body.clientHeight;// 通过深入 Document 内部对 body 进行检测，获取窗口大小if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {_this.winHeight = document.documentElement.clientHeight;_this.winWidth = document.documentElement.clientWidth;}}}window.ImgView = ImgView;
}(window, document));

下载点击HTML即可查看.