1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>imgBox</title>
5 <style>
6 *{list-style:none;}
7 </style>
8 </head>
9 <body>
10 <!-- 图片区 -->
11 <div class="g-media-wrap clearfix" data-uic="uic">
12 <div class="media-box">
13 <ul class="g-media-a g-media-a-mn g-media-a-m9 clearfix" data-ncheck="one">
14 <li class="g-pic">
15 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="1" />
16 </li>
17 <li class="g-pic">
18 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="2" />
19 </li>
20 <li class="g-pic">
21 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="3" />
22 </li>
23 <li class="g-pic">
24 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="4" />
25 </li>
26 <li class="g-pic">
27 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="5" />
28 </li>
29 <li class="g-pic">
30 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="6" />
31 </li>
32 <li class="g-pic">
33 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="7" />
34 </li>
35 <li class="g-pic">
36 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="8" />
37 </li>
38 <li class="g-pic">
39 <img src="http://popup.freep.cn/images/freepupload.jpg" data-pcidaction="9" />
40 </li>
41 </ul>
42 </div>
43 </div>
44 <div class="g-expand-media-box"></div>
45 <!-- /图片区 -->
46 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
47 <script type="text/javascript">
48 function imgsee(mbox,mli){
49 var lipar=''; //9*9小图
50 var bigpar='';//大图
51 var index=0;
52 var msgwid ,off,xx,yy;
53 var l;
54 // img和imgbox的各种属性
55 var imgw
56 var imgh;
57 var imgboxw;
58 var centerx;
59 var centery;
60 var imgtop;
61 var imgboxtop;
62 var imgleft;
63 var imgboxleft;
64 //num 旋转的计数
65 var num=0;
66 //小图li点击
67 $(mbox).on('click',mli,function(){
68 var addbox='<ul class="g-view-bar" style="height:30px;line-height:30px;">' +
69 '<li class="up"><a href="javascript:void(0);"><i style="background-position:-221px -104px;"></i>收起</a></li>' +
70 '<li class="big"><a href="javscript:void(0);" target="_blank"><i style="background-position-241px -104px;"></i>查看大图</a></li>' +
71 '<li class="to-left"><a href="javascript:void(0);"><i style="background-position:-266px -103px;"></i>向左转</a></li>' +
72 '<li class="to-right"><a href="javascript:void(0);"><i style="background-position:-289px -103px;"></i>向右转</a></li>' +
73 '</ul>' +
74 '<div class="bigpic" style="position:relative;width:490px;overflow:hidden;vertical-align:middle;text-align:center;"> '+
75 '<img src="" style="max-width:490px;min-width:100px;" /></div>' +
76 '<div class="slist" style="width:490px;margin-top:5px; overflow:hidden;"></div>';
77 lipar=$(this).parents(mbox);
78 bigpar=lipar.next('.g-expand-media-box');
79 index=$(this).index();
80 bigpar.append(addbox);
81 var bimgsrc=$(this).find('img').attr('src'); //大图src
82 l = lipar.find(mli).length;
83 bigpar.find("ul li").css({"float":"left","margin-left":"24px"});
84 bigpar.find("ul li a").css({"color":"#ea5415"});
85 var addhtml="<li><a href='javascript:;'><img src='' /></a></li>";//添加li
86 for(i=0;i<l;i++){
87 var allsrc=lipar.find('.g-media-a>li').eq(i).find('img').attr('src');
88 bigpar.find('.slist').append(addhtml);
89 bigpar.find('.slist>li').eq(i).find('a img').attr("src",allsrc);
90 }
91 bigpar.css('overflow','hidden');
92 bigpar.find(".slist li").css({"float":"left","width":"54px","height":"54px"});
93 bigpar.find(".slist li a.current").css({'padding':'0px','border':'2px solid #eb7350'});
94 bigpar.find(".slist li a.current").css({"padding":"0px","width":"50px","height":"50px","display":"block",'border':'2px solid #eb7350'});
95 bigpar.find(".slist li a").hover(function(){
96 $(this).css({'padding':'0px','border':'2px solid #eb7350'});
97 },function(){
98 bigpar.find(".slist li a").css({"padding":"2px","width":"50px","height":"50px","border":"0px"});
99 bigpar.find(".slist li a.current").css({"padding":"0px","width":"50px","height":"50px","display":"block",'border':'2px solid #eb7350'});
100 });
101 bigpar.find(".slist li img").css({"width":"50px","height":"50px"});
102 bigpar.find('.bigpic img').attr('src',bimgsrc);
103 bigpar.find('.slist li').eq(index).find('a').addClass('current');
104 bigpar.find(".slist li a.current").hover(function(){
105 bigpar.find(".slist li a.current").css({"padding":"0px","width":"50px","height":"50px","display":"block",'border':'2px solid #eb7350'});
106 },function(){
107 $(this).css({"padding":"0px","width":"50px","height":"50px","display":"block",'border':'2px solid #eb7350'});
108 });
109 lipar.hide().next(bigpar).show();
110 })
111 //收起
112 $('.g-expand-media-box').on('click','.g-view-bar li.up a',function(){
113 closePic($(this).parents('.g-expand-media-box'));
114 });
115 //点击查看大图
116 $('.g-expand-media-box').on('click','.g-view-bar li.big',function(){
117 $(this).find('a').attr('href',$(this).parents('.g-expand-media-box').find('.bigpic img').attr('src'));
118 });
119 //底部li点击事件
120 $('.g-expand-media-box').on('click','.slist li',function(){
121 index=$(this).index();
122 var listsrc=$(this).find('a img').attr('src');
123 showPic(index,$(this).find('a img').attr('src'),$(this).parents('.g-expand-media-box'));
124 $(this).find('a').addClass('current').parent('li').siblings('li').find('a').removeClass('current');
125 });
126 //划到图片上面的样式
127 $('.g-expand-media-box').on('mousemove','.bigpic img',function(e){
128 msgwid=$(this).width()/3;
129 num=$(this).attr('data-name');
130 if(num == -1 || num == -3){
131 msgwid=$(this).height()/3;
132 }
133 off=$(e.target).offset();
134 leftoff=off.left;
135 xx=e.pageX-leftoff;
136 //判断鼠标的位置
137 if(xx < msgwid){
138 $(this).removeClass('smallcursor rightcursor').addClass('leftcursor');
139 }else if(xx >= msgwid && xx < msgwid *2){
140 $(this).removeClass('leftcursor rightcursor').addClass('smallcursor');
141 }else{
142 $(this).removeClass('leftcursor smallcursor').addClass('rightcursor');
143 }
144 $('.leftcursor').css({"cursor":"url(http://img.t.sinajs.cn/t6/style/images/common/pic_prev.cur), auto"});
145 $('.smallcursor').css({"cursor":"url(http://img.t.sinajs.cn/t6/style/images/common/small.cur), auto"});
146 $('.rightcursor').css({"cursor":"url(http://img.t.sinajs.cn/t6/style/images/common/pic_next.cur), auto"});
147 });
148
149 //点击图片的改变
150 $('.g-expand-media-box').on('click','.bigpic',function(e){
151 //点击的位置之后的效果
152 l=$(this).parents('.g-expand-media-box').find('.slist>li').length;
153 //获取index
154 $(this).parents('.g-expand-media-box').find('.slist li ').each(function(e){
155 if($(this).find('a').attr('class')=='current'){
156 index=e;
157 }
158 })
159 if(xx < msgwid){
160 if(index == 0){
161 alert('已经到第一张图片了');
162 }else{
163 if($(this).find('img').is(':animated')){
164 return;
165 }
166 index--;
167 $(this).siblings('.slist').find('li').eq(index).trigger('click');
168 }
169 }else if(xx >= msgwid && xx < msgwid *2){
170 closePic($(this).parents('.g-expand-media-box'));
171 closero($(this).parents('.g-expand-media-box'));
172 }else{
173 if(index == l-1){
174 alert('已经到最后一张图片了');
175 }else{
176 if($(this).find('img').is(":animated")){
177 return;
178 }else{
179 index++;
180 $(this).siblings('.slist').find('li').eq(index).trigger('click');
181 }
182 }
183 }
184 })
185 //向左转
186 $('.g-expand-media-box').on('click','.g-view-bar li.to-left',function(){
187 //取没有转换之前的w,h
188 var thbox=$(this).parents('.g-expand-media-box');
189 var fd=thbox.find('.ropates').attr('class');
190 if(fd == undefined){
191 var removesrc = thbox.find('.bigpic img').attr('src');
192 thbox.find('.bigpic img').remove();
193 thbox.find('.bigpic').append("<div class='ropates'> <img src='' data-name='0' /></div>");
194 thbox.find('.bigpic .ropates img').attr('src',removesrc);
195 }
196 num=thbox.find('.ropates img').attr('data-name');
197 num--;
198 if(num == -4 ){
199 num = 0;
200 }
201 thbox.find('.ropates img').attr('data-name',num);
202 imgPos(num,thbox.find('.ropates'),thbox.find('.ropates img'));
203 });
204
205 //向右转
206 $('.g-expand-media-box').on('click','.g-view-bar li.to-right',function(){
207 //取没有转换之前的w,h
208 var thbox=$(this).parents('.g-expand-media-box');
209 var fd=thbox.find('.ropates').attr('class');
210 if(fd == undefined){
211 var removesrc = thbox.find('.bigpic img').attr('src');
212 thbox.find('.bigpic img').remove();
213 thbox.find('.bigpic').append("<div class='ropates'> <img src='' data-name='0' /></div>");
214 thbox.find('.bigpic .ropates img').attr('src',removesrc);
215 }
216 num=thbox.find('.ropates img').attr('data-name');
217 num++;
218 if(num == 1 ){
219 num = -3;
220 }
221 thbox.find('.ropates img').attr('data-name',num);
222 imgPos(num,thbox.find('.ropates'),thbox.find('.ropates img'));
223 });
224
225 //转换调用,thro,thimg,分别是父级和img
226 function imgPos(num,thro,thimg){
227 switch(num){
228 case 0:
229 thimg.css({'transform':'matrix(1,0,0,1,0,0)','position':'absolute','height':'auto'});
230 ioffset(thimg);
231 thro.css({'height':imgh});
232 thimg.css({'top':'0px','left':centerx});
233 break;
234 case -1:
235 //转换的高度等于之前的宽度
236 thimg.css({'transform':'matrix(0, -1, 1, 0, 0, 0)','position':'absolute','max-width':'490px'});
237 imgh=thimg.height();
238 imgboxw=thro.width();
239 if(imgh > imgboxw){
240 thimg.height(imgboxw);
241 }
242 //取两次img的高度，
243 ioffset(thimg);
244 var noww=thimg.width();
245 //取现在的宽度给box设定高度
246 thro.css({'height':noww});
247 thimg.css({'top':imgboxtop-imgtop,'left':imgboxleft-imgleft+centery});
248 break;
249 case -2:
250 thimg.css({'transform':'matrix(-1, 0, 0, -1, 0, 0)','position':'absolute','height':'auto'});
251 ioffset(thimg);
252 thro.css({'height':imgh});
253 thimg.css({'top':'0px','left':centerx});
254 break;
255 case -3:
256 thimg.css({'transform':'matrix(0, 1, -1, 0, 0, 0)','position':'absolute','max-width':'490px'});
257 imgh=thimg.height();
258 imgboxw=thro.width();
259 if(imgh > imgboxw){
260 thimg.height(imgboxw);
261 }
262 //取两次img的高度，
263 ioffset(thimg);
264 var noww=thimg.width();
265 //取现在的宽度给box设定高度
266 thro.css({'height':noww});
267 thimg.css({'top':imgboxtop-imgtop,'left':imgboxleft-imgleft+centery});
268 break;
269 }
270 //现在img and imgbox的属性
271 function ioffset(thimg){
272 thimg.css({'top':'0px','left':'0px'});
273 imgh=thimg.height();
274 imgw=thimg.width();
275 centery=(imgboxw-imgh) /2;
276 centerx=(imgboxw-imgw)/2;
277 //取img,imgbox距离top,left,方向的距离
278 imgtop=thimg.offset().top;
279 imgboxtop=thro.offset().top;
280 imgleft=thimg.offset().left;
281 imgboxleft=thro.offset().left;
282 }
283 }
284 //图片渐显
285 function showPic(index,listsrc,obj){
286 obj.find('.bigpic img').fadeTo(100,0.6,function(){
287 closero(obj);
288 obj.find('.bigpic img').attr('src',listsrc);
289 }).fadeTo(100,1);
290 }
291 //关闭旋转
292 function closero(obj){
293 var fd=obj.find('.ropates').attr('class');
294 if(fd == 'ropates'){
295 var removesrc =obj.find('.ropates img').attr('src');
296 obj.find('.ropates').remove();
297 obj.find('.bigpic').append("<img src=' ' />");
298 obj.find('.bigpic img').attr('src',removesrc);
299 num =0;
300 }
301 }
302 //关闭大图
303 function closePic(obj){
304 obj.empty().hide().prev().show();
305 }
306 }
307 imgsee('.g-media-wrap','.media-box ul li');
308 </script>
309 </body>
310 </html>
浙公网安备 33010602011771号