angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)
笔记: 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到此结束。
样子做的应该还算可以吧。(๑•̀ㅂ•́)و✧
angularjs1 自定义图片查看器(可旋转、放大、缩小、拖拽)的更多相关文章
- 强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...
- Viewer.js – 强大的JS/jQuery图片查看器
简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...
- 发布两款JQ小插件（图片查看器 + 分类选择器），开源
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...
- js手写图片查看器（图片的缩放、旋转、拖拽）
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- Win 10中使用图片查看器
在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...
- js实现图片查看器（图片的缩放、旋转、拖拽）
一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现 ...
- 网页中的图片查看器viewjs使用
需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyua ...
- jQuery功能强大的图片查看器插件
简要教程 viewer是一款功能强大的图片查看器jQuery插件.它可以实现ACDsee等看图软件的部分功能.它可以对图片进行移动,缩放,旋转,翻转,可以前后浏览一组图片.该图片查看器还支持移动设备, ...
- 使用 PyQt5 实现图片查看器
一.前言 在学习 PyQt5 的过程中我会不断地做一些小的 Demo,用于让自己能够更好地理解和学习,这次要做的就是一个图片查看器,主要功能包括打开图片.拖动图片.放大和缩小图片. 最终实现的图片查看 ...
随机推荐
- android推送，极光推送
android中简单易用的消息推送方式之中的一个 -------> 极光推送 首先来介绍一下极光推送. 极光推送:英文简称 JPush,是一个面向普通开发人员免费.开放的第三方消息推送服务,我们 ...
- git提交到远程虚拟机
git到自己的虚拟机中第一步:打通git(一)Linux中(ip为10.1.8.1)1.安装git如:Ubuntu中安装gitapt install git 2.Ubuntu中添加git用户sudo ...
- Django自定义模板函数
Django自定义模板函数 https://www.cnblogs.com/SunsetSunrise/p/7680491.html 在django中新建一个应用:listpage在listpage中 ...
- 华为交换机VRP用户界面配置及Telnet登录实验
user privilege level level 设置使用以上用户界面登录后的用户级别 5 acl acl-number { inbound | outbound } (可选)在用户界面上应用AC ...
- zabbix详解（一）
zabbix简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供柔软的通知机制以让系统管 ...
- 模块讲解----json与pickle模块的区别
1.在生产中,dumps和loads只进行一次,而且要用w把原来的数据冲掉,从而保证每次都是最新的. 2.虚拟机的快照,是每个快照都有一个文件,而不是全都不放在一起. 3.如果想生产好几个序列化,就生 ...
- css3 利用dispaly:flex
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- YYModel源代码阅读--基础知识
这段时间因为工作需要,阅读了YYModel这个开源框架,至于它能做什么,最直白的讲述就是JSON与Model之间的相互转化. 源代码在Github,大家可以自行git clone或者download. ...
- socketserver 并发连接
socketserver.TCPServer Example server side 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- Font: a C++ class
Font: a C++ class This class is used in Fractal Generator. Avi Examples The header fileFon ...