前端页面点击图片放大功能（viewerjs插件的简单而强大）

程序员文章站 2022-01-13 10:59:16

小编在制作前端网页的时候，为了提高前端的体验，如果图片太小，导致看不清。然后就去网上找了很多插件，发现都不满意，最后发现了viewer.js丨确实，这个插件很强大，也很合我意，因为这个插件有个特点就是，响应快，而且还可以放大。...

小编在制作前端网页的时候，为了提高前端的体验，如果图片太小，导致看不清。然后就去网上找了很多插件，发现都不满意，最后发现了viewer.js丨确实，这个插件很强大，也很合我意，因为这个插件有个特点就是，响应快，而且还可以放大。

网上发现使用viewerjs的人也有很多，有很多网站也在使用，使用过程中还是有一些版本上的差别，我在使用的时候就发现点击非图片区域时不能关闭图片弹出层，后来又摸索参考demo实例，引入viewerjs文件处理，现在我把使用的过程总结下，简单，实用，效果不错。

开始教程，前端js和css引入demo代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>viewer.js的使用教程-标准开头</title>
<!-- 引用css样式 -->
<link rel="stylesheet" type="text/css" href="css/viewer.min.css"/>
<!-- 先引用JQ，我的低版本也可以 -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- 接着顺序要正确，继续引用 -->
<script src="js/viewer.min.js"></script>
<script src="js/jquery-viewer.min.js"></script>
</head>
<body>
<div>
<img src="img/55.jpg" alt="viewer.js教程">
<div>
</body>
</html>

需要放大的图片内容

<div  id="content">
    <p>

    </P>
    <img src="images/demo_img1.jpg" alt="" data-original="images/wenes_login_logo.png">
    <img src="images/demo_img2.jpg" alt="" data-original="images/news_top_img.jpg">
</div>

页面加载后用以下一行简单js代码初始化控件

//根据图片路径src
$('#content').viewer();
//根据自定义的来源图片地址放大
//$("#content").viewer({ url: "data-original" });

初始化控件以上使用默认参数就行了，当然它本身有很多参数可以控制，如果你需要个性化控制可以参考以下的参数设置

$("#content").viewer({
        inline: false,  //是否启用 inline 模式
        url: 'data-original',  //设置大图片的 url
        navbar: true,  //显示缩略图导航
        zoomRatio: 0.4,  //鼠标滚动时的缩放比例
        // minZoomRatio:0.01, //最小缩放比例
        // maxZoomRatio:100, //最大缩放比例
        //zIndex:2015, //设置图片查看器 modal 模式时的 z-index
        button: true,  //显示右上角关闭按钮（jQuery 版本无效）
        title: false,  //显示当前图片的标题（现实 alt 属性及图片尺寸）
        keyboard: true,  //是否支持键盘
        movable: true,  //图片是否可移动
        tooltip: true,  //显示缩放百分比
        rotatable: true,  //图片是否可旋转
        scalable: true,  //图片是否可翻转
        toolbar: {   //显示工具栏
            zoomIn: 1,
            zoomOut: 1,
            oneToOne: 1,
            reset: 1,
            prev: 0,
            play: 0,
            next: 0,
            rotateLeft: 1,
            rotateRight: 1,
            flipHorizontal: 1,
            flipVertical: 1,
        },
        viewed: function () {
            viewer.view(0);
        }
    });

以上就是全部代码，还有文件我这也打包附件一下吧，直接下载引入你项目就可以了。希望可以帮到你！

http://file.10qianwan.com/20200820/viewerjs.zip

来源：，转载注明出处！