IT编程 > 网页制作 > HTML

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

1958人参与2020-08-20

小编在制作前端网页的时候,为了提高前端的体验,如果图片太小,导致看不清。然后就去网上找了很多插件,发现都不满意,最后发现了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

来源:萬仟网,转载注明出处!

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

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

08-20

LeetCode 第203场周赛 题解

08-01

ubuntu重装为win10

08-01

i5-10210U和i5-8265U的区别 哪个好

08-01

[蓝桥杯][2014年第五届真题]地宫取宝

08-01

Atcoder - abc176 -- D - Wizard in Maze【BFS + 双端队列】

08-01

拓展阅读

大家都在看

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

08-20

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-12

WVP+ZLMediaKit+MediaServerUI实现摄像头GB28181推流播放录制

08-12

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

7-2 交换最小值和最大值 (15分)

10-26

解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效!

08-14

Solr 8-7的安装、配置

11-13

热门评论