imge 點選放大圖片
阿新 • • 發佈:2018-11-07
//這個程式碼可以忽略 if(data.data.exposureImge!="" && data.data.exposureImge!=null){ var imgurl = ''; var img = data.data.exposureImge.split(","); imgurl += '<div id="mien" class="clearfix">'; for(var i=0;i<img.length;i++){ imgurl += "<img id='photoimgId"+i+"' src='"+apiManager.exposureStrategy +img[i]+"' width='150px' height='150px' onclick='openFile(this,photoimgId"+i+")'/> " } $("#commentsImg").html(imgurl); $('#mien').viewer(); } //當上麵點擊那個圖片就會給這個地址傳那個圖片 function openFile(e,photoimgId){ console.log(e); console.log(photoimgId) var imgSrc = ""; imgSrc = $(e).attr("src"); //id = $(e).attr("id"); imgSrc = imgSrc.replace(/url\("/,"");//去掉 url(" var img_show = null; // tips提示 var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:400px;' />"; img_show = layer.tips(img, this,{ tips:[2, 'rgba(41,41,41,.5)'] ,area: ['430px'] }); $('img').attr('style','max-width:70px'); }
第二種方法實現點選放大 <link rel="stylesheet" type="text/css" href="../../common/viewer/viewer.min.css" /> <script src="../../common/viewer/viewer-jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../../common/jquery/jquery-3.0.0.min.js"></script> 引入 然後 if(data.data.exposureImge!="" && data.data.exposureImge!=null){ var imgurl = ''; var img = data.data.exposureImge.split(","); imgurl += '<div id="mien" class="clearfix">'; for(var i=0;i<img.length;i++){ imgurl += '<img data-original="'+apiManager.exposureStrategy +img[i]+'" src="'+apiManager.exposureStrategy +img[i]+'" width="150px" height="150px" />' } imgurl +='</div>'; console.log(imgurl); $("#commentsImg").html(imgurl); //需要這個方法 你是拼接的話要寫到這裡 如果你是在頁面寫死的要 $('#mien').viewer(); } 寫死的時候 <div id="mien" class="clearfix"> <div class="pull-left mien-l"> <img data-original="../../img/scenicSpot/img1.png" src="../../img/scenicSpot/img1.png" /> </div> <div class="pull-left mien-c"> <img data-original="../../img/scenicSpot/img3.png" src="../../img/scenicSpot/img3.png" /> <img data-original="../../img/scenicSpot/img4.png" src="../../img/scenicSpot/img4.png" /> </div> <div class="pull-right mien-r"> <img data-original="../../img/scenicSpot/img2.png" src="../../img/scenicSpot/img2.png" /> </div> </div> 在這裡引用 <script type="text/javascript"> $('#mien').viewer(); </script>
js 外掛地址 https://download.csdn.net/download/qq_29072049/10667010
效果圖