利用layer弹窗插件，实现图片放大缩小功能！jquery图片放大缩小

以下是以前用到的源码，分享出来让大家参考一下！

这个兼容性挺好的，用起来简单。

HTML核心部分：

<li id="itemLi_5" onclick="bigIma(5);" data-src="原图.jpg">
 <a href="#" class="a-img"><img src="缩略图.jpg"></a>
  <p class="description"></p>
  <div class="qianm clearfloat">
    <span class="sp1"><b>小川</b></span>
   <span class="sp3">2016-10-24 10:22:52</span>
  </div>
</li>
<li id="itemLi_6" onclick="bigIma(6);" data-src="原图.jpg">
 <a href="#" class="a-img"><img src="缩略图.jpg"></a>
  <p class="description"></p>
  <div class="qianm clearfloat">
    <span class="sp1"><b>小川</b></span>
   <span class="sp3">2016-10-24 10:22:52</span>
  </div>
</li>

JS核心部分：

<script>
function bigIma(id){
 var imgUrl = $("#itemLi_"+id).attr('data-src');
  window.img_width = 355;
 var html  = "<center>";
   html += "<div style='position:fixed; left:50%; margin-left:-40px; bottom:5px;'>";
   html += "  <button style='width:40px; height:40px; border-radius:20px;'";
   html += "        onclick='window.img_width < 1000 ? window.img_width += 100 : 0;";
   html += "  $(\".img_url_class\").css({width: window.img_width});'>";
    html += "  放大";
   html += "  </button>&nbsp; &nbsp; ";
    html += "  <button style='width:40px;  height:40px;border-radius:20px;'";
   html += "  onclick='window.img_width > 100 ? window.img_width -= 100 : 0;";
    html += "  $(\".img_url_class\").css({width: window.img_width})' >"; 
   html += "  缩小"; 
   html += "  </button>";
    html += "</div>";
   html += "</center>";
    html += "<br/>";
    html += "<center>";
   html += "<img class='img_url_class' style='width:100%;' src='"+imgUrl+"' />";
   html += "</center>";
  //页面层
 layer.open({
    title:'原始图预览',
    type: 1,
   //skin: 'layui-layer-rim', //加上边框
   area: ['355px', '615px'], //宽高
   content: html
  });
}
</script>

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/138.html

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意