请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

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

个人博客 2020-12-01 14:51 萬仟网 243 直达下载地址
小编在制作前端网页的时候,为了提高前端的体验,如果图片太小,导致看不清。然后就去网上找了很多插件,发现都不满意,最后发现了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" 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 id="content">
<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>
</body>
</html>

页面加载后用以下一行简单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);}
});

配置

名称 类型 默认值 说明
inline 布尔值 false 启用 inline 模式
button 布尔值 true 显示右上角关闭按钮(jQuery 版本无效)
navbar 布尔值/整型 true 显示缩略图导航
title 布尔值/整型 true 显示当前图片的标题(现实 alt 属性及图片尺寸)
toolbar 布尔值/整型 true 显示工具栏
tooltip 布尔值 true 显示缩放百分比
movable 布尔值 true 图片是否可移动
zoomable 布尔值 true 图片是否可缩放
rotatable 布尔值 true 图片是否可旋转
scalable 布尔值 true 图片是否可翻转
transition 布尔值 true 使用 CSS3 过度
fullscreen 布尔值 true 播放时是否全屏
keyboard 布尔值 true 是否支持键盘
interval 整型 5000 播放间隔,单位为毫秒
zoomRatio 浮点型 0.1 鼠标滚动时的缩放比例
minZoomRatio 浮点型 0.01 最小缩放比例
maxZoomRatio 数字 100 最大缩放比例
zIndex 数字 2015 设置图片查看器 modal 模式时的 z-index
zIndexInline 数字 0 设置图片查看器 inline 模式时的 z-index
url 字符串/函数 src 设置大图片的 url
build 函数 null 回调函数,具体查看演示
built 函数 null 回调函数,具体查看演示
show 函数 null 回调函数,具体查看演示
shown 函数 null 回调函数,具体查看演示
hide 函数 null 回调函数,具体查看演示
hidden 函数 null 回调函数,具体查看演示
view 函数 null 回调函数,具体查看演示
viewed 函数 null 回调函数,具体查看演示
普通下载地址:
前端页面点击图片放大功能(viewerjs插件)

常见问题FAQ

免费下载或者专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担,本站不承担任何责任。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可直接联系我们。
模板/插件不会安装或需要功能定制以及二次开发?
QQ或者微信联系我们。

本文转载:萬仟网 http://www.10qianwan.com/articledetail/654684.html

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:利用js在前端页面点击图片放大功能(viewerjs插件的简单而强大)

本文地址:https://www.cbing.net/daima/8.html

分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1