利用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> ";
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>
