在做angular项目的时候，有个需求就是对影像列表里的图片点击的时候进行预览，因为列表里的图片放的只能是缩略图，有可能图片里面的内容看不清。在之前时间比较赶，就直接用写了几个方法，简单的对图片进行放大以及缩小固定尺寸，总体效果并不是很好。在项目优化的时候，就对这块进行了优化 对想在的效果还是比较满意的。先上效果图
实现的步骤
引入js跟css以及一些图标图片
imgView.js 内容：
(function(window, document) {
var ImgView =function(targetDom, options) {
// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
if (!(this instanceof ImgView))return new ImgView(targetDom, options);
// 参数
this.options =this.extend({
dataList: [],
currentSrc:""
}, options);
// 获取dom
this.targetDom = document.getElementById(targetDom);
var html ="<div id='imgViewDiv' class='img-view-dialog'>" +
"<div id='imgViewContent' class='img-view-content' draggable>" +
"<img id='dialogImg' class='dialog-img' src=''></div>" +
"<div class='dialog-tool'><i id='closeDialog' class='close-dialog' title='关闭'></i>" +
"<i id='rotateDialog' class='rotate-dialog' title='旋转'></i><i id='prevDialog' class='previous-dialog'></i>" +
"<i id='nextDialog' class='next-dialog'></i></div></div>";
this.targetDom.innerHTML =html;
this.btnClose = document.getElementById("closeDialog");
this.btnRotate = document.getElementById("rotateDialog");
this.btnPrev = document.getElementById("prevDialog");
this.btnNext = document.getElementById("nextDialog");
this.imgViewDiv = document.getElementById("imgViewDiv");
this.imgViewContent = document.getElementById("imgViewContent");
this.dialogImg = document.getElementById("dialogImg");
this.num =0;
this.winWidth =0;
this.winHeight =0;
this.startX =0,this.startY =0,this.x =0,this.y =0;
this.index =1;
this.event();
}
ImgView.prototype = {
init:function() {
this.event();
},
extend:function(obj, obj2) {
for (var k in obj2) {
obj[k] = obj2[k];
}
return obj;
},
event:function() {
var _this =this;
_this.thisSrc =_this.options.currentSrc;
var dataList =_this.options.dataList;
var index =dataList.indexOf(_this.thisSrc);
_this.checkImg(_this.options.currentSrc,index);
// 关闭
_this.btnClose.addEventListener("click",function() {
_this.close(_this);
});
// 旋转
_this.btnRotate.addEventListener("click",function() {
_this.rotate(_this);
});
// 上一张
_this.btnPrev.addEventListener("click",function() {
_this.prev(_this);
});
// 下一张
_this.btnNext.addEventListener("click",function() {
_this.next(_this);
});
// 鼠标按下
_this.imgViewContent.addEventListener("mousedown",function(event) {
_this.mousedown(_this, event);
});
// 滚轮事件 chrome & ie
_this.imgViewContent.addEventListener("mousewheel",function(event) {
_this.mousewheel(_this, event);
});
// 滚轮事件 firefox
_this.imgViewContent.addEventListener("DOMMouseScroll",function(event) {
_this.mousewheel(_this, event);
});
},
// 滚轮事件
mousewheel:function(_this, event) {
event.preventDefault();
var delta = (event.wheelDelta && (event.wheelDelta >0 ?1 : -1)) ||// chrome & ie
(event.detail !=0 && (event.detail >0 ? -1 :1));
if (delta >0) {
// 向上滚
_this.index = _this.index +0.1;
if (_this.index >4) {
_this.index =4;
}
}else if (delta <0) {
// 向下滚
_this.index = _this.index -0.1;
if (_this.index <0.1) {
_this.index =0.1;
}
}
_this.imgViewContent.style.marginLeft = _this.imgMarginLeft - ((_this.index -1) * _this.imgWidth) /2 +"px";
_this.imgViewContent.style.marginTop = _this.imgMarginTop - ((_this.index -1) * _this.imgHeight) /2 +"px";
event.target.style.width = _this.imgWidth * _this.index +"px";
event.target.style.height = _this.imgHeight * _this.index +"px";
},
// 鼠标按下事件(拖拽用)
mousedown:function(_this, event) {
event.preventDefault();
var imgWidth = _this.imgWidth * _this.index;
var imgHeight = _this.imgHeight * _this.index;
var rotateNum = _this.num *90;
// 根据旋转的角度不同，坐标也不一样
if (rotateNum %90 ==0 &&rotateNum %180 !=0 &&rotateNum %270 !=0 &&rotateNum %360 !=0) {
_this.startX = (imgWidth -imgHeight) /2 +imgHeight - event.offsetY;
_this.startY = event.offsetX - (imgWidth -imgHeight) /2;
}else if (rotateNum %180 ==0 &&rotateNum %360 !=0) {
_this.startX =imgWidth - event.offsetX;
_this.startY =imgHeight - event.offsetY;
}else if (rotateNum %270 ==0 &&rotateNum %360 !=0) {
_this.startX = (imgWidth -imgHeight) /2 + event.offsetY;
_this.startY =imgWidth - event.offsetX - (imgWidth -imgHeight) /2;
}else {
_this.startX = event.offsetX;
_this.startY = event.offsetY;
}
document.addEventListener('mousemove',mousemove);
document.addEventListener('mouseup',mouseup);
// 拖拽
function mousemove(event) {
_this.y = event.clientY - _this.startY -10;
_this.x = event.clientX - _this.startX -10;
_this.imgViewContent.style.marginTop ="" + _this.y +"px";
_this.imgViewContent.style.marginLeft ="" + _this.x +"px";
_this.imgViewContent.style.transition ="margin 0s";
};
// 鼠标放开
function mouseup() {
document.removeEventListener('mousemove',mousemove);
document.removeEventListener('mouseup',mouseup);
_this.imgViewContent.style.transition ="all 0.6s";
}
},
// 关闭
close:function(_this) {
var imgViewDiv = document.getElementById("imgViewDiv");
imgViewDiv.setAttribute("class","img-view-dialog closing");
setTimeout(function() {
imgViewDiv.setAttribute("class","img-view-dialog");
imgViewDiv.style.display ="none";
_this.num =0;
},400);
},
// 旋转
rotate:function(_this) {
_this.num++;
_this.imgViewContent.style.transform ="rotate(" + _this.num *90 +"deg) scale(1, 1)";
},
// 上一张
prev:function(_this) {
var dialogImg = document.getElementById("dialogImg");
var thisSrc =dialogImg.attributes[2].value;
var dataList = _this.options.dataList;
var index =dataList.indexOf(thisSrc);
if (index >0 &&index <= (dataList.length -1)) {
index =index -1;
_this.checkImg(dataList[index],index);
}
},
// 下一张
next:function(_this) {
var dialogImg = document.getElementById("dialogImg");
var thisSrc =dialogImg.attributes[2].value;
if (thisSrc.indexOf("width:") != -1 ||thisSrc.indexOf("height:") != -1) {
thisSrc =dialogImg.attributes[3].value;
}
var dataList = _this.options.dataList;
var index =dataList.indexOf(thisSrc);
if (index >=0 &&index < (dataList.length -1)) {
index =index +1;
_this.checkImg(dataList[index],index);
}
},
// 点击图片
checkImg:function(thisSrc, index) {
var dataList =this.options.dataList;
var _this =this;
_this.index =1;
_this.num =0;
_this.dialogImg.style.transform ="";
_this.imgViewContent.setAttribute("class","img-view-content");
_this.getWindowWH();
if (index ==0) {
_this.btnPrev.style.display ="none";
}else if (index == (dataList.length -1)) {
_this.btnNext.style.display ="none";
}else {
_this.btnPrev.style.display ="block";
_this.btnNext.style.display ="block";
}
var image =new Image();
image.src = thisSrc;
var width =image.width;
var height =image.height;
var ww =860;
var wh =_this.winHeight -20;
if (width
width =width;
height =height;
}else {
var scale_x =width /ww;
var scale_y =height /wh;
if (scale_x >scale_y) {
var width =ww;
var height =parseInt(height /scale_x);
}else {
var width =parseInt(width /scale_y);
var height =wh;
}
}
_this.imgWidth =width;
_this.imgHeight =height;
var left = (_this.winWidth -width) /2;
var top = (_this.winHeight -height) /2;
_this.imgMarginLeft =left;
_this.imgMarginTop =top;
_this.imgViewContent.style.cssText ="margin-top:" +top +"px; margin-left:" +left +"px";
_this.dialogImg.style.cssText ="width:" +width +"px; height:" +height +"px;";
setTimeout(function() {
_this.dialogImg.setAttribute("src", thisSrc);
_this.imgViewContent.setAttribute("class","img-view-content loadingImg");
},600);
},
// 获取浏览器宽高
getWindowWH:function() {
var _this =this;
if (window.innerWidth)
_this.winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
_this.winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
_this.winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
_this.winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
_this.winHeight = document.documentElement.clientHeight;
_this.winWidth = document.documentElement.clientWidth;
}
}
}
window.ImgView =ImgView;
}(window,document));
style.css内容
* {
box-sizing:border-box;
}
img {
border:0;
max-width:100%;
height:auto;
vertical-align:top;
}
.col-md-3 {
width:25%;
float:left;
padding:0 10px;
}
.img-name {
text-align:center;
padding:10px 0;
}
.img-view-dialog {
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
z-index:99;
background:rgba(0,0,0,0.5);
}
.img-view-content {
display:inline-block;
margin:15px auto;
border-radius:4px;
padding:10px;
visibility:visible;
background:#fff url(./images/loading.gif)no-repeat center;
-moz-transition:transform .6s,margin .6s;
-webkit-transition:transform .6s,margin .6s;
-o-transition:transform .6s,margin .6s;
transition:transform .6s,margin .6s;
cursor:-webkit-grab;
-webkit-backface-visibility:hidden;
-webkit-animation:flyin .5s;
-moz-animation:flyin .5s;
animation:flyin .5s;
}
.loadingImg.img-view-content {
background:#fff;
}
.loadingImg .dialog-img {
opacity:1;
}
.img-view-content img {
display:block;
opacity:0;
-moz-transition:all .6s;
-o-transition:all .6s;
-webkit-transition:all .6s;
transition:all .6s;
min-width:0;
max-width:none;
min-height:0;
max-height:none;
vertical-align:baseline;
}
.closing .img-view-mask {
-webkit-backface-visibility:hidden;
-webkit-animation:fadeout .5s;
-moz-animation:fadeout .5s;
animation:fadeout .5s;
}
.closing .img-view-content {
-webkit-backface-visibility:hidden;
-webkit-animation:flyout .5s;
-moz-animation:flyout .5s;
animation:flyout .5s;
}
.closing .dialog-tool {
-webkit-backface-visibility:hidden;
-webkit-animation:fadeout .5s;
-moz-animation:fadeout .5s;
animation:fadeout .5s;
}
.dialog-tool {
z-index:2;
-webkit-backface-visibility:hidden;
-webkit-animation:fadein 0.5s;
-moz-animation:fadein 0.5s;
animation:fadein 0.5s;
}
.close-dialog {
background:url(./images/photoTheater.png)no-repeat -1px -128px;
width:20px;
height:20px;
overflow:hidden;
display:block;
position:fixed;
right:20px;
top:20px;
cursor:pointer;
}
.rotate-dialog {
background-image:url(./images/rotate.png);
background-repeat:no-repeat;
background-size:cover;
background-position:0 0;
width:20px;
height:20px;
overflow:hidden;
display:block;
position:fixed;
right:60px;
top:20px;
cursor:pointer;
}
.dialog-tool .rotate-dialog:hover {
background-position:0 -20px;
}
.dialog-tool .close-dialog:hover {
background-position: -1px -149px;
}
.dialog-tool .previous-dialog,
.dialog-tool .next-dialog,
.dialog-tool .next-dialog:hover,
.dialog-tool .previous-dialog:hover {
background:url(./images/photoTheater.png)no-repeat 0 0;
background-position-x:0px;
background-position-y:0px;
width:66px;
height:60px;
line-height:66px;
display:block;
position:fixed;
top:45%;
cursor:pointer;
overflow:hidden;
font-size:40px;
font-weight:bold;
margin-top: -30px;
text-align:center;
}
.dialog-tool .next-dialog {
background-position:0 -65px;
right:0;
}
.dialog-tool .previous-dialog {
left:0;
background-position: -70px -65px;
}
.dialog-tool .next-dialog:hover {
background-position:0 0;
}
.dialog-tool .previous-dialog:hover {
background-position: -70px 0;
}
@-webkit-keyframes flyin {
0% {
opacity:0;
-webkit-transform:translateY(-40px);
transform:translateY(-40px);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0);
}
}
@keyframes flyin {
0% {
opacity:0;
-webkit-transform:translateY(-40px);
-ms-transform:translateY(-40px);
transform:translateY(-40px);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
}
}
@-webkit-keyframes flyout {
0% {
opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
}
100% {
opacity:0;
-webkit-transform:translateY(-40px);
-ms-transform:translateY(-40px);
transform:translateY(-40px);
}
}
@keyframes flyout {
0% {
opacity:1;
-webkit-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
}
100% {
opacity:0;
-webkit-transform:translateY(-40px);
-ms-transform:translateY(-40px);
transform:translateY(-40px);
}
}
@-webkit-keyframes fadeout {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@keyframes fadeout {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
@keyframes fadein {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
图标：
实现的步骤
1.在需要使用到的页面引入js css，我使用的是懒加载形式引入
if(pageName=='p02_04' && !$scope.pageDisplayAry.p02_04){
$ocLazyLoad.load(['js/controllers/p/p02_04.js','libs/imgView/imgView.js','libs/imgView/style.css']).then(function(){
$scope.pageDisplayAry.p02_04 =true;
$scope.p02_04=true;
});
}
2.在图片列表页面加入预览的容器
图片中1就是预览容器，2是图片的列表，图片加上点击事件
3.js数据渲染与绑定
imgView为页面上预览容器的id，$scope.dataList 是一个数组，里面的每一项对应预览的图片的地址，src为当前点击图片的地址
$scope.seeImg=function(event){
var src = event.target.attributes['src'].value;
var options = {
dataList: $scope.dataList,
currentSrc:src
};
ImgView("imgView",options);
}
下面是这个预览插件的html，js实现。需要的可以直接拿去整理修改下，放在百度网盘了
链接: https://pan.baidu.com/s/1Qtm0F1UXwBfVNehKyq9ndQ 提取码: k37f
