需求:商品清單中圖檔點選放大。
實作方法:使用viewer.js插件,實作點選圖檔圖檔放大
做法:
1.下載下傳viewer.js插件
2.頁面上引入相關的插件
<link rel="stylesheet" href="../js/viewer/viewer.min.css"/>
<script type="text/javascript" src="../js/viewer/viewer.min.js"></script>
3.初始化插件
比如我想放大檔案中這些圖檔
如何初始化插件:
頁面對應的js中添加:$('.viewer').viewer();
如果你想放大之後更換圖檔,可以對應的img标簽中添加屬性:data-original="newurl"
參數值是你放大之後展示的新的圖檔位址,初始化:
$('#viewer').viewer({url:"data-original"});
實作的效果: