全部
全部 教程 模板 代码 软件 办公 文章
viewerjs强大的响应式图片弹出层360度旋转放大缩小

viewerjs强大的响应式图片弹出层360度旋转放大缩小

添加时间：2021-03-17 04:32:32
站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!
赞助一下
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型：图片相册
  • 模板颜色模板颜色：中级
  • 下载积分下载积分：28 米粒
  • 下载权限下载权限：

    赞助会员

当前位置：

  • 前端特效
  • 图片代码

    • Viewer.js 是一款强大的图片相册插件，像SNS交友网站一般都会用到点击缩略图，弹出层大图片，而且弹出层有多个控制按钮，比如放大缩小、旋转、撤回等，底部有缩略图列表可切换哦。

    分类：图片代码 > 图片相册 难易：中级

    <ul > <li>支持移动设备触摸事件</li> <li>支持响应式</li> <li>支持放大/缩小</li> <li>支持旋转（类似微博的图片旋转）</li> <li>支持水平/垂直翻转</li> <li>支持图片移动</li> <li>支持键盘</li> <li>支持全屏幻灯片模式（可做屏保）</li> <li>支持缩略图</li> <li>支持标题显示</li> <li>支持多种自定义事件</li></ul>

    图片相册html代码

    <ul id="sucaihuo">
    <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
    <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
    <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
    <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
    <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
    <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
</ul>

    引入并调用图片插件viewer.js

    <script src="js/viewer.min.js"></script>
    var viewer = new Viewer(document.getElementById('sucaihuo'), {
    url: 'data-original'
});
    参数 描述 默认值 inline 启用 inline 模式 false button 显示右上角关闭按钮（jQuery 版本无效） true navbar 显示缩略图导航 true title 显示当前图片的标题（现实 alt 属性及图片尺寸） true toolbar 显示工具栏 true tooltip 显示缩放百分比 true movable 图片是否可移动 true zoomable 图片是否可缩放 true rotatable 图片是否可旋转 true scalable 图片是否可翻转 true transition 使用 CSS3 过度 true fullscreen 播放时是否全屏 true keyboard 是否支持键盘 true interval 播放间隔，单位为毫秒 5000 zoomRatio 鼠标滚动时的缩放比例 0.1 minZoomRatio 最小缩放比例 0.01 maxZoomRatio 最大缩放比例 100 zIndex 设置图片查看器 modal 模式时的 z-index 2015 zIndexInline 设置图片查看器 inline 模式时的 z-index 0 url 设置大图片的 url src build 回调函数，具体查看演示 null built 回调函数，具体查看演示 null show 回调函数，具体查看演示 null shown 回调函数，具体查看演示 null hide 回调函数，具体查看演示 null hidden 回调函数，具体查看演示 null view 回调函数，具体查看演示 null viewed 回调函数，具体查看演示 null
    上一篇：jQuery双屏显示文字和图片动画效果
    下一篇：js+css3分散式图片相册幻灯片展示特效
    相关内容推荐
    资源求助发帖
    查看更多发帖

    回帖

    *

    回帖描述：

    *

    链接类型：

    *

    下载链接：

    密码：
    发帖规则：回帖内容为会员之间的私信，普通网友无法查看。
    免责声明：回帖中提供的链接内容仅供会员之间学习参考使用，获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求，不得违反法律法律的要求。
    站点权责：回帖内容如违反法律法规，站点有权封停账号使用权利。对用户举报的内容，站点有责任及时删除违规内容。
    热点内容推荐

    发帖找资源

    标题：viewerjs强大的响应式图片弹出层360度旋转放大缩小

    *

    描述：
    平均回复时间：3-10分钟
    规则介绍：悬赏寻求论坛网友分享资源，站点对分享内容的准确性，合法性，版权等没有足够的监管能力。如果您发现资源不正确，无法使用，不符合法律法律等情况，您可以直接举报资源。站长将尽快核实您的举报，并根据情况，采取封号，退换米粒等处理。

    回帖

    *

    回帖描述：

    *

    链接类型：

    *

    阅读权限：

    *

    下载链接：

    密码：
    发帖规则：回帖内容为会员之间的私信，普通网友无法查看。
    免责声明：回帖中提供的链接内容仅供会员之间学习参考使用，获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求，不得违反法律法律的要求。
    站点权责：回帖内容如违反法律法规，站点有权封停账号使用权利。对用户举报的内容，站点有责任及时删除违规内容。
    • 背景波浪
    • 背景波浪
    • 波浪
    • 波浪
    互联网
    IT编程
    技能技巧
    学习教程
    干货福利
    职业考试

    • 微信客服微信客服
    • qq客服QQ客服
    • qq群QQ群

    聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6

    Copyright(C)web.com, All Rights Reserved.

    客服
    在线咨询
    周一 至 周日 9:00 ~ 22:00
    QQ：1326974360
    微信：juyoubuluo6688
    客服热线
    18205485173
    工作日 9:00 ~ 18:00
    微信扫码咨询
    客户服务
    欢迎咨询服务
    咨询量较多时，请耐心等待
    福利
    福利
    社群

    关注公众号

    获取更多资讯

    扫码进群(QQ)

    与更多大牛交流沟通

    反馈
    0.174306s