album 

</style>

-------------------------------------------

<img class="zone_ad1.jpg" class="imgLi"/>
<img class="zone_ad2.jpg" class="imgLi"/>
<div id="outerdiv">
  　
  <div class="prevBtn bigBtn" onselectstart="return false"></div>
  　
  <div id="innerdiv">
    　　　<img src="" id="bigimg">
    　　
  </div>
  　　
  　　
  <div class="prevBtn bigBtn" onselectstart="return false"></div>
</div>

-----------------------------------------------

/*当有N个相册，每个相册有数量不等的图片*/
$(function(){
　　$(".imgLi").on("click",function(){
　　　　var index=$(this).index(); // 获取点击的第几个相册
　　　　var arr=glovalVue.album[index]; //vue数据绑定相册，获取此时的相册数组
if(arr.length==1){
　　　　　　$(".bigBtn").hide();
　　　　}else{
　　　　　　$(".bigBtn").show();
　　　　}
　　　　imgSize(arr[0].src); //传递相册第一张图片的src
　　　　imgShow("#outerdiv","#innerdiv"."#bigimg",arr);
　　});
})
/*图片弹窗显示*/
function imgShow(outerdiv,innerdiv,bigimg,arr){
　　var i=0;
　　$(".nextBtn").on("click",function(event)){
　　　　event.stopPropagation();
　　　　i++;
　　　　if(i==arr.length){
　　　　　　i=0;
　　　　}
　　　　imgSize(arr[i].src);
　　});
　　$(".prevBtn").on("click",function(event){
　　　　　event.stopPropagation();
　　　　　i--;
　　　　　if(i<0){
　　　　　　i=arr.length-1;
　　　　}
　　　　imgSize(arr[i].src);　　
　　});
 1 <style> 
 2 
 3 #outerdiv{position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:2;width:100%;height:100%;display:none;}
 4 #innerdiv{position:absolute;}
 5 #innerdiv #bigimg{border:5px solid #222226;display: block;box-shadow: 0 0 30px rgba(4,15,34,.9);border-radius: 4px;}
 6 #outerdiv .prevBtn:after,#outerdiv .prevBtn:before,
 7 #outerdiv .nextBtn:after,#outerdiv .nextBtn:before{content:"";width:0;height:0;border:20px solid transparent;position: absolute;top:50%;cursor: pointer;}
 8 #outerdiv .prevBtn:after,#outerdiv .prevBtn:before{border-right:30px solid #ff5454;left: 20px;}
 9 #outerdiv .nextBtn:after,#outerdiv .nextBtn:before{border-left:30px solid #ff5454;right: 20px;}
10 </style>
11 
12 -------------------------------------------
13 
14 <img class="zone_ad1.jpg" class="imgLi"/>
15 <img class="zone_ad2.jpg" class="imgLi"/>
16 <div id="outerdiv">
17 　　<div class="prevBtn bigBtn" onselectstart="return false"></div>
18 　　<div id="innerdiv">
19 　　　　<img src="" id="bigimg">
20 　　</div>　　
21 　　<div class="prevBtn bigBtn" onselectstart="return false"></div>
22 </div>
23 
24 -----------------------------------------------
25 
26 /*当有N个相册，每个相册有数量不等的图片*/
27 
28 $(function(){
29 　　$(".imgLi").on("click",function(){
30 　　　　var index=$(this).index(); // 获取点击的第几个相册
31 　　　　var arr=glovalVue.album[index]; //vue数据绑定相册，获取此时的相册数组
32                if(arr.length==1){
33 　　　　　　$(".bigBtn").hide();
34 　　　　}else{
35 　　　　　　$(".bigBtn").show();
36 　　　　}
37 　　　　imgSize(arr[0].src); //传递相册第一张图片的src
38 　　　　imgShow("#outerdiv","#innerdiv"."#bigimg",arr);
39 　　});
40 
41 })
42 
43 /*图片弹窗显示*/
44 
45 function imgShow(outerdiv,innerdiv,bigimg,arr){
46 　　var i=0;
47 　　$(".nextBtn").on("click",function(event)){
48 　　　　event.stopPropagation();
49 　　　　i++;
50 　　　　if(i==arr.length){
51 　　　　　　i=0;
52 　　　　}
53 　　　　imgSize(arr[i].src);
54 　　});
55 
56 　　$(".prevBtn").on("click",function(event){
57 　　　　　event.stopPropagation();
58 　　　　　i--;
59 　　　　　if(i<0){
60 　　　　　　i=arr.length-1;
61 　　　　}
62 　　　　imgSize(arr[i].src);　　
63 　　});
64 }
65 
66 function imgSize(src) {
67     $("#bigimg").attr("src", src);
68     $("<img/>").attr("src", src).load(function () {
69         var windowW = $(window).width();
70         var windowH = $(window).height();
71         var realWidth = this.width;
72         var realHeight = this.height;
73         var imgWidth, imgHeight;
74         var scale = 0.8;
75 
76         if (realHeight > windowH * scale) {
77             imgHeight = windowH * scale;
78             imgWidth = imgHeight / realHeight * realWidth;
79             if (imgWidth > windowW * scale) {
80                 imgWidth = windowW * scale;
81             }
82         } else if (realWidth > windowW * scale) {
83             imgWidth = windowW * scale;
84             imgHeight = imgWidth / realWidth * realHeight;
85         } else {
86             imgWidth = realWidth;
87             imgHeight = realHeight;
88         }
89         $("#bigimg").css("width", imgWidth);
90         var w = (windowW - imgWidth) / 2;
91         var h = (windowH - imgHeight) / 2;
92         $(innerdiv).css({"top": h, "left": w});
93         $(outerdiv).fadeIn("fast");
94     });
95     $(outerdiv).click(function () {
96         $(this).fadeOut("fast");
97     });
98 }
99

 

 92 }
 93 
 94 function imgSize(src) {
 95     $("#bigimg").attr("src", src);
 96     $("<img/>").attr("src", src).load(function () {
 97         var windowW = $(window).width();
 98         var windowH = $(window).height();
 99         var realWidth = this.width;
100         var realHeight = this.height;
101         var imgWidth, imgHeight;
102         var scale = 0.8;
103 
104         if (realHeight > windowH * scale) {
105             imgHeight = windowH * scale;
106             imgWidth = imgHeight / realHeight * realWidth;
107             if (imgWidth > windowW * scale) {
108                 imgWidth = windowW * scale;
109             }
110         } else if (realWidth > windowW * scale) {
111             imgWidth = windowW * scale;
112             imgHeight = imgWidth / realWidth * realHeight;
113         } else {
114             imgWidth = realWidth;
115             imgHeight = realHeight;
116         }
117         $("#bigimg").css("width", imgWidth);
118         var w = (windowW - imgWidth) / 2;
119         var h = (windowH - imgHeight) / 2;
120         $(innerdiv).css({"top": h, "left": w});
121         $(outerdiv).fadeIn("fast");
122     });
123     $(outerdiv).click(function () {
124         $(this).fadeOut("fast");
125     });
126 }
127

 

posted @ 2017-04-01 16:44  mudeng007  阅读(156)  评论(0)    收藏  举报