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.初始化插件

    比如我想放大文件中这些图片

 如何初始化插件:

页面对应的js中添加:$('.viewer').viewer();

如果你想放大之后更换图片，可以对应的img标签中添加属性:data-original="newurl"

参数值是你放大之后展示的新的图片地址，初始化:

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

实现的效果:

 希望对你有所帮助，如果你想做web应用系统或者程序私聊我哦