天天看點

viewer.js插件的應用

需求:商品清單中圖檔點選放大。

viewer.js插件的應用

實作方法:使用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.初始化插件

    比如我想放大檔案中這些圖檔

viewer.js插件的應用

 如何初始化插件:

頁面對應的js中添加:$('.viewer').viewer();

如果你想放大之後更換圖檔,可以對應的img标簽中添加屬性:data-original="newurl"

參數值是你放大之後展示的新的圖檔位址,初始化:

$('#viewer').viewer({url:"data-original"});

實作的效果:

繼續閱讀