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,用于让自己能够更好地理解和学习,这次要做的就是一个图片查看器,主要功能包括打开图片.拖动图片.放大和缩小图片. 最终实现的图片查看 ...
随机推荐
- 010-Shell 输入/输出重定向
大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回到您的终端.一个命令通常从一个叫标准输入的地方读取输入,默认情况下,这恰好是你的终端.同样,一个命令通常将其输出写入到标准输出,默 ...
- 003-linux基本目录介绍
一.文件系统的类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别. 普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件等,可用c ...
- JS生成随机字符串的多种方法
这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...
- abap编辑器中代码不可修改
当出现abap编辑器中代码不能修改的情况,可以按如下设置: edit——> 修改操作——>关闭助手
- jQuery异步加载数据并添加事件示例
当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的. 1.之前用的是jq1.4.3 ...
- UVA10700:Camel trading(栈和队列）
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=68990#problem/J 题目大意: 给一个没有加上括号的表达式且只有+ , ...
- vertical-align和line-height的深入应用
vertical-align和line-height的深入应用 本文的重点是了解vertical-align和line-height的使用 涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非 ...
- Outputting Strings in the Console
Outputting Strings in the Console #include <windows.h> class Console {public: enum fore_color ...
- Codeforces Round #403 (Div. 2, based on Technocup 2017 Finals) B. The Meeting Place Cannot Be Changed
地址:http://codeforces.com/contest/782/problem/B 题目: B. The Meeting Place Cannot Be Changed time limit ...
- HDU - 2732 Leapin' Lizards (拆点最大流)
题意:有N*M的矩形,每个格点有一个柱子,每根柱子有高度c,允许蜥蜴经过这根柱子c次,开始有一些蜥蜴在某些柱子上,它们要跳出这个矩形,每步最大能跳d个单位,求最少有多少蜥蜴不能跳出这个矩形. 分析:转 ...