需求:商品清單中圖檔點選放大。
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5SO1QDNyYDOyEGZjZjMhZzYyYzX2UzNwcTM3AzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
實作方法:使用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"});
實作的效果: