笔记: angularjs1 制作自定义图片查看器(可旋转、放大、缩小、拖拽)
2018-01-12 更新 可以在我的博客 查看我 已经封装好的 纯 js写的图片查看器插件 博客链接
懒得把它封装成插件(其实把angularjs的点击事件成js的点击事件就行了)
下面贴代码(打包好的 记得用服务器打开、火狐也行)
打包文件(百度网盘上) 链接: https://pan.baidu.com/s/1o9dMl8A 密码: n3ue
里面有个详细的demo
文件包括
angular.min.js
jquery
layer弹出框
bootstrap 样式
font-awesome 字体图标
service (我写angular 封装的http请求)，
me-lazyload 懒加载插件
directive 自定义指令 的 文件
imgList 现在可以是文件，但是只有图片类型才可点击查看， 其他类型文件可显示于列表上 可下载而已
图片是我的壁纸(好看记得回来赞我(๑•̀ㅂ•́)و✧)
大概样子
html
<body ng-app='myApp' ng-controller="imgCheck"> <img-view file-list="imgList" delete-url="deleteUrl" is-delete="isDelete"></img-view> </body>
自定义指令的templateUrl
<div class="img-has-border"> <meta charset="utf-8" /> <div class="form-horizontal clear-float"> <div class="col-md-2" ng-repeat="item in pdfList"> <div class="img-div"> <img class="img-item" ng-src="{{ item.src }}" ng-click="checkPdf(item)" /> <div class="operation-div"> <div class="btn-download" title="删除" ng-if="isDelete" ng-click="delete(item, $index, 'pdf')"><i class="fa fa-trash-o"></i></div> <div class="btn-download" title="下载" ng-click="download(item)"><i class="fa fa-download"></i></div> </div> <div class="img-show-date">{{ item.createdDate }}</div> </div> <div class="img-name">{{ item.name }}</div> </div> <div class="col-md-2" ng-repeat="item in imgList"> <div class="img-div"> <img class="img-item" lazy-src="{{ item.src }}" ng-click="checkBigImg($index,item.src)" err-src="./images/file_icon.png" /> <div class="operation-div"> <div class="btn-download" title="删除" ng-if="isDelete" ng-click="delete(item, $index, 'img')"><i class="fa fa-trash-o"></i></div> <div class="btn-download" title="下载" ng-click="download(item)"><i class="fa fa-download"></i></div> </div> <div class="img-show-date">{{ item.createdDate }}</div> </div> <div class="img-name">{{ item.name }}</div> </div> <div class="col-md-2" ng-repeat="item in otherList"> <div class="img-div"> <img class="img-item" ng-src="{{ item.src }}"/> <div class="operation-div"> <div class="btn-download" title="删除" ng-if="isDelete" ng-click="delete(item, $index, 'file')"><i class="fa fa-trash-o"></i></div> <div class="btn-download" title="下载" ng-click="download(item)"><i class="fa fa-download"></i></div> </div> <div class="img-show-date">{{ item.createdDate }}</div> </div> <div class="img-name">{{ item.name }}</div> </div> </div> <div class="img-view-dialog" ng-show="isPicture" ng-class="{ closing : isClose }"> <div class="img-view-content" draggable ng-class="{ loadingImg : hasImg }"> <img class="dialog-img" src="" /> </div> <div class="dialog-tool"> <i class="download-dialog" ng-click="downloadImg()"><i class="fa fa-download"></i></i> <i class="close-dialog" ng-click="backoff()"></i> <i class="rotate-dialog" ng-click="rotate()"></i> <i ng-show="preTrue" class="previous-dialog" ng-click="previous()"></i> <i ng-show="nextTrue" class="next-dialog" ng-click="next()"></i> </div> </div> </div>
自定义指令
// 自定义指令: 图片查看器 app.directive('imgView', ["$timeout", "$window", "$document", "$rootScope", "allService", function ($timeout, $window, $document, $rootScope, allService) { return { restrict: 'E', replace: true, scope: { fileList: "=", // 文件数组 deleteUrl: "=", // 删除文件的请求链接 isDelete: "=" // 是否隐藏删除文件 }, templateUrl: "./templateUrl/imgView.html", link: function ($scope, elem, attr) { $scope.isPicture = false; var cameraList = []; $scope.imgList = []; $scope.otherList = []; var imgWidth = 0; var imgHeight = 0; var selPage = 1; var num = 0; $scope.$watch("fileList", function (newValue) { if (newValue) { cameraList = []; $scope.imgList = []; $scope.otherList = []; $scope.pdfList = []; angular.forEach($scope.fileList, function (elt, index) { var suffixList = elt.name.split(".") elt.suffix = suffixList[suffixList.length - 1]; if (elt.suffix == "jpg" || elt.suffix == "png" || elt.suffix == "jpeg" || elt.suffix == "gif") { cameraList.push(elt.src); $scope.imgList.push(elt); } else if (elt.suffix == "doc" || elt.suffix == "docx") { elt.src = "./images/word_icon.jpg"; $scope.otherList.push(elt); } else if (elt.suffix == "xls" || elt.suffix == "xlsx") { elt.src = "./images/excel_icon.jpg"; $scope.otherList.push(elt); } else if (elt.suffix == "pdf") { elt.src = "./images/pdf_icon.png"; $scope.pdfList.push(elt); } else { elt.src = "./images/file_icon.png"; $scope.otherList.push(elt); } }) } }) // 下载 $scope.download = function (item) { var path = item.src; window.location.href = path; } // 删除 $scope.delete = function (item, $index, fileType) { layer.confirm('确定删除该文件吗？', { title: '温馨提示', icon: 0, btn: ['确定', '取消'] }, function (index) { delFiles(item, $index, fileType); }) } // 删除文件请求方法 function delFiles(item, $index, fileType) { var url = $scope.deleteUrl; if (url == "无法删除") { layer.alert('该过程不能删除文件', { title: "提示信息", icon: 2, skin: 'layer-ext-moon', closeBtn: 0 }, function (index) { layer.close(index); }); return; } var postData = $.param($.extend({ "参数1": "" }, { "参数2": "" })); allService.post(url, postData).then(function successCallback(resp) { if (resp.ErrCode == "200") { layer.alert('删除成功', { title: "提示信息", icon: 1, skin: 'layer-ext-moon', closeBtn: 0 }, function (index) { layer.close(index); $scope.$apply(function () { if (fileType == "img") { $scope.imgList.splice($index, 1); } else if (fileType == "pdf") { $scope.pdfList.splice($index, 1); } else { $scope.otherList.splice($index, 1); } }) }); } }); } // =========================== 下面为图片的操作 =======================/ var startX = 0, startY = 0, x = 0, y = 0; var position = 1; var imgMarginLeft = 0; var imgMarginTop = 0; var winWidth = 0, winHeight = 0; element = angular.element(document.getElementsByClassName("img-view-content")); // 鼠标按下事件 element.on('mousedown', function (event) { event.preventDefault(); var newImgWidth = imgWidth * position; var newImgHeight = imgHeight * position; var rotateNum = num * 90; if (rotateNum % 90 == 0 && rotateNum % 180 != 0 && rotateNum % 270 != 0 && rotateNum % 360 != 0) { startX = (newImgWidth - newImgHeight) / 2 + newImgHeight - event.offsetY; startY = event.offsetX - (newImgWidth - newImgHeight) / 2; } else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) { startX = newImgWidth - event.offsetX; startY = newImgHeight - event.offsetY; } else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) { startX = (newImgWidth - newImgHeight) / 2 + event.offsetY; startY = newImgWidth - event.offsetX - (newImgWidth - newImgHeight) / 2; } else { startX = event.offsetX; startY = event.offsetY; } $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); }); // 滚轮事件 放大、缩小 element.on("mousewheel DOMMouseScroll", function (event) { event.preventDefault(); console.log(event); var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie (event.detail != 0 && (event.detail > 0 ? -1 : 1)) || (event.originalEvent.deltaY && (event.originalEvent.deltaY < 0 ? 1 : -1)); if (delta > 0) { // 向上滚 position = position + 0.1; if (position > 4) { position = 4; } } else if (delta < 0) { // 向下滚 position = position - 0.1; if (position < 0.1) { position = 0.1; } } element.css({ "margin-left": imgMarginLeft - ((position - 1) * imgWidth) / 2 + "px", "margin-top": imgMarginTop - ((position - 1) * imgHeight) / 2 + "px" }); angular.element(".dialog-img").css({ (imgWidth * position) + "px", height: (imgHeight * position) + "px" }); }); // 拖拽事件 function mousemove(event) { y = event.clientY - startY - 10; x = event.clientX - startX - 10; element.css({ "margin-top": y + 'px', "margin-left": x + 'px', transition: 'margin 0s' }); } // 鼠标放开事件 function mouseup(event) { $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); element.css({ transition: 'all .6s' }); } // 下载 $scope.downloadImg = function () { var src = angular.element(".dialog-img").attr("src"); window.location.href = src; } /** * 返回 */ $scope.backoff = function () { $scope.isClose = true; $timeout(function () { $scope.isClose = false; $scope.isPicture = false; num = 0; position = 1; angular.element(".img-view-content").css({ transform: 'rotate(' + 90 * num + 'deg) scale(1, 1)' }); }, 400); } /** * 翻转 */ $scope.rotate = function () { num++; angular.element(".img-view-content").css({ transform: 'rotate(' + 90 * num + 'deg) scale(1, 1)' }); } /** * 上一张 */ $scope.previous = function () { var index = selPage - 1; if (index < 0 || index > (cameraList.length - 1)) return; var data = cameraList[index]; $scope.checkBigImg(index, data); } /** * 下一张 */ $scope.next = function () { var index = selPage + 1; if (index < 0 || index > (cameraList.length - 1)) return; var data = cameraList[index]; $scope.checkBigImg(index, data); } /** * 点击图片时 */ $scope.checkBigImg = function (index, data) { position = 1; num = 0; $scope.hasImg = false; getWindowWH(); if (index == 0) { $scope.preTrue = false; } else { $scope.preTrue = true; } if (index == (cameraList.length - 1)) { $scope.nextTrue = false; } else { $scope.nextTrue = true; } selPage = index; var image = new Image(); image.src = data; var width = image.width; var height = image.height; winHeight = winHeight - 20; var ww = 860; var wh = winHeight; 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) { width = ww; height = parseInt(height / scale_x); } else { width = parseInt(width / scale_y); height = wh; } } var left = (winWidth - width) / 2; var top = (winHeight - height) / 2; $scope.isPicture = true; imgWidth = width; imgHeight = height; imgMarginLeft = left; imgMarginTop = top; angular.element(".img-view-content").css({ "margin-top": top + "px", "margin-left": left + "px" }); angular.element(".dialog-img").css({ width + "px", height: height + "px" }); $timeout(function () { angular.element(".dialog-img").attr("src", cameraList[index]); $scope.hasImg = true; }, 600); } // 获取浏览器宽高 function getWindowWH() { var _this = this; if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; // 通过深入 Document 内部对 body 进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } } } }; }]);
ok到此结束。
样子做的应该还算可以吧。(๑•̀ㅂ•́)و✧