在做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?
