笔记: 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({ width: (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: 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到此结束。
样子做的应该还算可以吧。(๑•̀ㅂ•́)و✧