viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)

viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)

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

淘建站为您提供更多_图片代码_图片相册_放大_缩小,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 299 次

下载资源

5 积分

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

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

图片相册html代码

<ul id="sucaiq">
    <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('sucaiq'), {
    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

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/807.html
viewer.js强大的响应式图片弹出层(360度旋转、放大缩小) 希望对你有帮助,感谢您的支持!
  • jquery图片自滚动瀑布流效果

    jquery图片自滚动瀑布流效果

  • jquery柔韧性的图片滑动瀑布流布局

    jquery柔韧性的图片滑动瀑布流布局

  • jquery 瀑布流实例最流行瀑布流图片展示

    jquery 瀑布流实例最流行瀑布流图片展示

  • jquery masonry瀑布流插件制作图片瀑布流布局代码

    jquery masonry瀑布流插件制作图片瀑布流布局代码

  • js精彩图片瀑布流布局

    js精彩图片瀑布流布局

  • html5 modernizr图片瀑布流布局点击弹出图片滑动预览

    html5 modernizr图片瀑布流布局点击弹出图片滑动预览

  • jQuery开启百宝箱摇头效果

    jQuery开启百宝箱摇头效果

  • 一张图片的动画效果的演示

    一张图片的动画效果的演示

  • html5鼠标悬停叠加图片弹性动画特效

    html5鼠标悬停叠加图片弹性动画特效

  • 纯css3简单旋转风车动画特效

    纯css3简单旋转风车动画特效

  • 酷炫html5图片组合动画效果代码

    酷炫html5图片组合动画效果代码

  • css3 svg地球旋转动画特效

    css3 svg地球旋转动画特效

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2