1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

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

小川 技术文章
郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负,下载后请24小时内删除。 本站所有内容均不能保证其完整性,不提供任何技术支持,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。

利用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、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情