http://ccspublishing.org.cn/style/web/js/article/imgShow.js

1$(document).ready(function () {
2
3    // 全局变量
4//	所有图片的信息
5    var imgArr = imgBox();
6    var wrapper = $('#miniImgs-wrapper');
7    var miniImgHeight = parseInt(wrapper.css('height'));
8    
9//    用来记录缓存的图片
10    var originalImgsObj = {};
11    
12//    循环添加mini图到图片展示功能
13    for (var n=0;n<imgArr.length;n++){
14    	var minisrc = imgArr[n].miniSrc;
15    	var src = "";
16    	if(minisrc.indexOf("mini")!=-1){
17    		src = minisrc.replace("_mini","");
18    	}else{
19    		src = minisrc;
20    	}
21    	$('#miniImgs>ul')[0].innerHTML += '<li><a href="javascript:void(0);"><img src="'+src+'" onerror="this.onerror=null;this.src='+src+'" alt=""></a></li>';
22    }
23
24//    主要方法,图片滚动
25    function openImg(imgIndex) {
26//    	限制点击换图的参数
27    	var clickAble = true;
28    	
29        var miniImgs = $("#miniImgs");
30//        ul
31        var miniImgsUl = miniImgs.children('ul');
32//        所有图片的wrapper  li
33        var miniImgsLi = miniImgsUl.children('li');
34//        图片数量
35        var miniImgsLength = miniImgsLi.length;
36
37
38//        给图片总数赋值
39        $('#allImgNum').html(miniImgsLength);
40
41
42//        单个图片高度
43        var miniImgsLiHeight = miniImgsLi.eq(0).css('height');
44//        单个图片算上margin一共所占高度
45        var liHeight = parseInt(miniImgsLiHeight) + 5;
46//            当前图片的index
47        var index = 0;
48//        展示数量
49        var num = 4;
50//        用于比较范围
51        var num2 = Math.ceil(num / 2);
52        
53//        执行图片切换的次数
54        var theOpenNum = 0;
55
56//        返回mini图ul位移数
57        function Animate(obj, json) {
58            var iCur = parseInt(obj.css('top'));
59            iCur = iCur ? iCur : 0;
60            var iSpeed = (json.top - iCur);
61            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
62            return (iCur + iSpeed + 'px');
63        }
64        
65//        主要切换方法
66        function change() {
67            var originalImgs = $('#originalImgs');
68            
69            
70//            $('#ruler .staff').css('left',-13);
71            
72            
73//            用来接收mini图ul位移的变量
74            var val;
75//            切换范围判断
76            if (index < num2) {
77                val = Animate(miniImgsUl, {top: 0});
78            } else if (index + num2 < miniImgsLength) {
79                val = Animate(miniImgsUl, {top: -(index - num2 + 1) * liHeight});
80            } else {
81                val = Animate(miniImgsUl, {top: -(miniImgsLength - num) * liHeight});
82            }
83//            给当前选中的mini图添加类名(border)
84            miniImgsLi.eq(index).addClass('borderHigh').siblings('.borderHigh').removeClass('borderHigh');
85
86//            从所有图片信息中选中当前图片
87			var nowImg = imgArr[index];
88            var src = nowImg.src;
89            
90//            判断originalImgsObj对象中是否有该图片,也就意味是否加载完成过该图片
91            if(!originalImgsObj[src]){
92//            	没加载过改图片
93//            	隐藏大图,加载完成后显示
94                originalImgs.css('visibility','hidden');
95                // 新建img加载src开始
96                var img = new Image();
97                img.src = src;
98                img.onload = function(e){
99//                  e.stopPropagation();
100                    originalImgs.attr('src', src);
101                    originalImgsObj[src] = true;
102                    originalImgs.css('visibility','visible');
103                };
104            }else{
105//            	加载过该图片,直接添加
106                originalImgs.attr('src', src);
107            }
108//				当前第几个图片
109            $('#nowImgIndex').html(index+1);
110//            中英文图题
111            $('#imgTitle .titleCn').html(nowImg.titleCn);
112            $('#imgTitle .titleEn').html(nowImg.titleEn);
113            if(!isNull(nowImg.altCn)){
114            	$('#imgTitle .altCn').html(nowImg.altCn);//图注
115            }else{
116            	$('#imgTitle .altCn').html("");//图注
117            }
118            if(!isNull(nowImg.altEn)){
119            	$('#imgTitle .altEn').html(nowImg.altEn);
120            }else{
121            	$('#imgTitle .altEn').html("");
122            }
123            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
124            $('#originalImgDownload').attr('onclick',nowImg.downloadImg);
125            $('#originalPPTDownload').attr('onclick',nowImg.downloadPPT);
126
127//            是否第一次切换,默认打开自动切换一次
128            if(theOpenNum!=0 && clickAble){
129//            	非首次切换,且限制切换速度,有动画
130                clickAble = false;

131                miniImgsUl.animate({top: val}, 100);
132                setTimeout(function(){
133                	clickAble = true;
134                },100);
135            }else{
136//            	第一次切换,没动画效果
137                miniImgsUl.css('top',val);
138//                resetMiniImgs();
139                theOpenNum++;
140            }
141        }
142
143
144//        点击mini图切换大图
145        $(document).on('click', '#miniImgs a', function (e) {
146            e.preventDefault();
147            if(index === $(this).parent().index()){
148                return;
149            }
150            index = $(this).parent().index();
151            change();
152        });
153
154//        上下页
155        $('#imgPrev').click(imgPrev);
156        $('#imgNext').click(imgNext);
157
158        function imgPrev() {
159            index--;
160//            index = index == -1 ? miniImgsLength -1 : index;
161            if (index === -1){
162                index = 0;
163                return;
164            }
165            change();
166        };
167        function imgNext() {
168            index++;
169//            index = index == miniImgsLength ? 0 : index;
170            if(index === miniImgsLength){
171                index = miniImgsLength-1;
172                return;
173            }
174            change();
175        };
176
177//        整个方法可传参可不传,当在htmlContent中点击图片时会传入图片index
178        if (typeof imgIndex === 'number') {
179            index = imgIndex;
180        }else{
181            index = 0;
182        }
183
184        // 鼠标在大图上进行上一页下一页
185        $('#originalImgs-wrapper div.originalImgs-wrapper').mousemove(function(event){
186            var _this = $(this);
187            var y = event.pageY;
188
189            var height = $(this).height();
190            var marginTop = $(this).offset().top;
191
192            if(y>=marginTop&&y<marginTop+height/2) {
193                _this.removeClass('theNext').addClass('thePrev');
194                return;
195            }
196            if(y>=marginTop+height/2 && y<marginTop+height){
197                _this.addClass('theNext').removeClass('thePrev');
198                return;
199            }
200
201            _this.removeClass('theNext').removeClass('thePrev');
202        }).on('click',function(){
203            if($(this).hasClass('theNext')){
204                imgNext();
205                return;
206            }
207            if($(this).hasClass('thePrev')){
208                imgPrev();
209                return;
210            }
211
212        });
213
214
215//        默认自动执行一次切换方法
216        change();
217    }
218
219    
220
221    
222//    $(window).resize(resetMiniImgs);
223//
224//    function resetMiniImgs(){
225//        var top = ($(window).height() - miniImgHeight)/2;
226//        // 设置小图wrapper的纵向位置
227//        wrapper.css('top',top+'px');
228//    }
229
230
231
232//  页面"图集"点击展开图示
233	$(document).on('click','.atlas img',function(){
234		$('#imgShow').show();
235		addHtmlPadding();
236		openImg();
237	});
238//	htmlContent中点击图片展开图示
239	$(document).on('click','#htmlContent ._figclass .figure_title>a',function(e){
240		e.preventDefault();
241		var index = $(this).parents('._figclass').index('#htmlContent ._figclass');
242//		alert(index);
243		$('#imgShow').show();
244		addHtmlPadding();
245		openImg(index);
246	});
247//	图表中点击图片展开图示
248	$(document).on('click','#figTab ._figclass .figureTextBox a',function(e){
249		e.preventDefault();
250		var index = $(this).parents('._figclass').index('#figTab ._figclass');
251//		alert(index);
252		$('#imgShow').show();
253		addHtmlPadding();
254		openImg(index);
255	});
256	
257//	关闭图示功能
258	$(document).on('click','#imgBack>

258a',function(e){
259		e.preventDefault();
260		clearHtmlPadding();
261		$('#imgShow').hide();
262	});
263
264
265//    获取图片原始大小,暂未使用
266    function getImgSize(img){
267        var nWidth, nHeight;
268        if(img.naturalWidth){
269            nWidth = img.naturalWidth;
270            nHeight = img.naturalHeight;
271        }else{//IE 6 7 8
272            var image = new Image();
273            image.src = img.src;
274            image.onload = function(){
275                nHeight = image.style.height;
276                nWidth = image.style.width;
277            }
278        }
279        return {width:nWidth,height:nHeight};
280    }
281	//获取htmlContent中所有图示需要的图片信息，包成对象，返回
282	function imgBox(){
283		var imgs = $('#htmlContent ._figclass');
284		var imgArr = [];
285		
286		for (var n=0;n<imgs.length;n++){
287			var img = imgs.eq(n);
288			var imgSrc = img.find('.figure_title>a').attr('href');
289			var imgDownloadImg = img.find('.figure_button>a').eq(0).attr('onclick');
290			var imgDownloadPPT = img.find('.figure_button>a').eq(1).attr('onclick');
291			var imgTitleCn = img.find('.figure_title>.figure_caption>div').eq(0).html();
292			var imgTitleEn = img.find('.figure_title>.figure_caption>div').eq(1).html();
293			var imgAltCn = img.find('.figure_title>.figure_caption>.contentAltCn').html();
294			var imgAltEn = img.find('.figure_title>.figure_caption>.contentAltEn').html();
295			var miniSrc = img.find('.figure_title>a>img').attr('src');
296			var imgObj = {
297				src:imgSrc,
298				downloadImg:imgDownloadImg,
299				downloadPPT:imgDownloadPPT,
300				titleCn:imgTitleCn,
301				titleEn:imgTitleEn,
302				altCn:imgAltCn,
303				altEn:imgAltEn,
304				miniSrc:miniSrc
305			};
306			imgArr.push(imgObj);
307		}
308		return imgArr;
309	}
310});
311
312
313