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>
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
