首页 > 代码库 > 查看图片（类似微博发布图片的查看效果）
查看图片（类似微博发布图片的查看效果）
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="http://www.mamicode.com/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=http://www.mamicode.com/‘‘ data-name=‘0‘ />
查看图片（类似微博发布图片的查看效果）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。