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,用于让自己能够更好地理解和学习,这次要做的就是一个图片查看器,主要功能包括打开图片.拖动图片.放大和缩小图片. 最终实现的图片查看 ...
随机推荐
- Python学习笔记（一）数据类型
一.整型和浮点型 Python可以处理任意大小的整数,当然包括负整数,在程序中的表示方法和数学上的写法一模一样 age=10 num=-35 score=98.8 二.布尔类型 布尔值和布尔代数的表示 ...
- 判断是否关注了微信公众号 subscribe 0=未关注 1=已关注
$appid=''; $secret=''; //微信网页授权获取openid $web_url='http://www.xxxx.com/shouquan.php'; if (!isset($_GE ...
- JAVA math包
Math类: java.lang.Math 类中包含基本的数字操作,如指数.对数.平方根和三角函数. java.math是一个包,提供用于执行任意精度整数(BigInteger)算法和任意精度小数(B ...
- Web UI 自动化单个xpath抓取插件详解
原文地址http://blog.csdn.net/kaka1121/article/details/51878346 单个控件获取 需求: 右键到某个控件上,就能获取到至多三个可以唯一定位该元素的相对 ...
- Java设计原则—单一职责原则(转)
定义: 应该有且仅有一个原因引起类的变更. There should never be more than one reason for a class to change. 优点: 1.类的复杂性降 ...
- 2017 Multi-University Training Contest - Team 4 hdu6069 Counting Divisors
地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6069 题目: Counting Divisors Time Limit: 10000/5000 ...
- 通过存储过程创建SQL作业
USE dbNameGO/****** Object: StoredProcedure [dbo].[usp_Createjob] Script Date: 03/26/2014 14:36:30 * ...
- javascript 理解对象--- 定义多个属性和读取属性的特性
一 定义多个属性 ECMAScript5 定义了一个Object.defineProperties()方法,用于定义多个属性.此方法接受两个对象参数: 第一个对象:要添加或修改其属性的对象 第二个对象 ...
- 什么是Socket?简单点，通俗易懂的？
网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket. 建立网络通信连接至少要一对端口号(socket).socket本质是编程接口(API),对TCP/IP的封装 ...
- 新linux系统上rz 与sz命令不可用
使用命令进行安装:yum install lrzsz 即可使用