欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端页面点击图片放大功能(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

来源:,转载注明出处!