HTML代码
<ul class="clearfix">
<li>
<h3>身份证正面照片</h3>
<div>
<img ng-click="changePic($event)" ng-src="showImg/{{personInfos.dealer.idCardFace}}" />
</div>
</li>
<li>
<h3>身份证反面照片</h3>
<div>
<img ng-click="changePic($event)" ng-src="showImg/{{personInfos.dealer.idCardBack}}" />
</div>
</li>
</ul>
<div id="js-imgview-mask" class="imgview-mask" style="display: none;" ng-click="closePic()">//黑盒子
</div>
<div id="js-imgview" class="show-img">//显示的图片
<img id="bigimage">
<a ng-click="closePic()">X</a>
</div>
JS代码
//点击图片时放大显示图片
$scope.changePic=function($event){
var img=$event.srcElement || $event.target;
angular.element("#bigimage")[0].src=img.src;
angular.element("#js-imgview")[0].style.display="block";
angular.element("#js-imgview-mask")[0].style.display="block";
}
//点击图片时放小显示图片
$scope.closePic =function(){
angular.element("#js-imgview")[0].style.display="none";
angular.element("#js-imgview-mask")[0].style.display="none";
}
CSS代码
/* 图片放大的代码 */
.imgview-mask{
position: fixed;
height: 100%;
width: 100%;
z-index: 999998;
left: 0;
top: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
display: none;
}
.show-img{
position: fixed;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
background: #fff;
z-index: 999999;
width: 900px;
height: 666px;
margin-left: -450px;
margin-top: -333px;
display: none;
}
.show-img img{
width: 900px;
height: 666px;
}
.show-img a{
position: absolute;
width: 40px;
height: 40px;
right: -40px;
top: -40px;
background: url(../image/index-close.png) -10px -10px no-repeat;
}
.show-img a:hover{
position: absolute;
width: 40px;
height: 40px;
right: -40px;
top: -40px;
background: url(../image/index-close.png) -10px -77px no-repeat;
}