1.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

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

小川 前端

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

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情