js手机端对已有的图片点击放大插件scale.js

我们在用手机浏览网站的时候,有时我们想对已经发布了的图片做如下处理,点击图片然后全屏显示图片、可以根据2指缩放、点击黑色的背景关闭并恢复原图,整体效果如下:

js手机端对已有的图片点击放大插件scale.js

1、 scale.js 的使用

要实现这个效果,我们可以通过scale.js来实现,下面介绍下scale.js的使用方法,首先引入样式和脚本,然后添加一个div标签和初始化即可:

<link rel="stylesheet" href="css/scale.css" type="text/css" charset="utf-8"/>
<script src="js/scale.js" type="text/javascript" charset="utf-8"></script>

<section class="imgzoom_pack">
     <div class="imgzoom_x">
         <div class="imgzoom_img"><img src=""/></div>
     </div>
 </section>
  
 <script type="text/javascript">
 document.addEventListener("DOMContentLoaded", function(event) {
     ImagesZoom.init({
         "elem": ".stu_detail"//要放大的图片的父元素的类
     });
 })
 </script>

2、 scale.js 的下载

相关推荐