技术控

    今日:121| 主题:49552
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JRollViewer:基于 JRoll 开发的图集查看器插件

[复制链接]
请帮我爱他 发表于 2016-12-2 15:23:51
132 6

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
JRollViewer

  一款基于JRoll开发的图集查看器插件
  注意!!!

  
       
  •       必须 JRoll v2.4.x 以上
       
  •       若        document.body高度超出一屏,即当        document.body.scrollTop不为0时会影响本插件的滚动效果。      
       
  •       请将        document.body的css样式设为        overflow:hidden;height:100%,超出内容使用JRoll进行滑动      
      
  Tips:html的height为100%时,body的高度才能占满全屏
  引入

  支持标签、CommonJS、AMD、CMD方式引入
  标签

  1. <!-- 先引入JRoll再引入JRollViewer -->
  2. <script src="jroll.js"></script>
  3. <script src="jroll-viewer.js"></script>
复制代码
AMD

  1. define(['jroll', 'jroll-viewer'], function (JRoll, JRollViewer) {
  2.   var viewer = new JRollViewer('#viewer'{
  3.     JRoll: JRoll //不能确定引入顺序时可以参数形式将JRoll传给JRollViewer
  4.   })
  5. })
复制代码
使用说明

  1. <!-- 基本用法 -->
  2. <div id="viewer">
  3.   <img src="http://www.cdn.cn/1.png" jroll-viewer-image>
  4.   <img src="../images/2.jpg" jroll-viewer-image>
  5.   <img src="../images/3.gif">
  6. </div>
  7. <script>
  8. var viewer = new JRollViewer('#viewer')
  9. </script>
复制代码
       
  • 在      div#viewer容器里存放      img图片,图片必须带      jroll-viewer-image标记   
  •       new JRollViewer('#viewer')将      div#viewer创建为JRollViewer实例容器   
  • 点击带      jroll-viewer-image标记的图片即可打开图片查看器  
  选项

  1. new JRollViewer(el [, options])
复制代码
                   键名        默认值        说明                            data        undefined        小图dataset的属性作为大图读取的图片路径,若不指定该选项,默认读取小图src                    zoomMax        图片原始值        图片最大缩放倍数,以window.innerWidth为1                    JRoll        window.JRoll        用于异步引入JRoll,不能确保window.JRoll比window.JRollViewer先加载完成时使用              例:
  1. <div id="viewer">
  2.   <img src="http://www.cdn.cn/1.png" data-big="http://www.cdn.cn/b1.png" jroll-viewer-image>
  3. </div>
  4. <script>
  5. var viewer = new JRollViewer('#viewer', {
  6.   data: 'big',
  7.   zoomMax: 3,
  8.   JRoll: window.JRoll
  9. })
  10. </script>
复制代码
方法

  show

  1. // 打开第一张图片
  2. viewer.show(0)
  3. // or 打开src为`../images/2.jpg`的图片
  4. viewer.show('../images/2.jpg')
  5. // or 打开指定 img dom 的图片
  6. viewer.show(document.getElementById('viewer').children[0])
复制代码
一个参数,打开选中的图片
  hide

  收起图片查看器
  1. viewer.hide()
复制代码
switch

  手动切换图片,可利用该方法做图片自动轮播
  1. viewer.switch(1, 200)
复制代码
viewer.switch(index[, duration])
  
       
  • index 必填,索引值,要切换到哪张图片   
  • duration 可选,过渡时间  
  Log

  v0.1.2 (2016-12-1)

  
       
  • 添加data选项  
  v0.1.1 (2016-11-29)

  
       
  • 修改了使用方式   
  • 允许多实例并存   
  • 每次打开查看器,重新生成要查看的图片,避免不断创建查看器   
  • 修复body.scrollTop不为0时错位的问题  
  v0.0.2 (2016-11-25)

  
       
  • 完成  
友荐云推荐




上一篇:Database Features Across the Altova Product Line
下一篇:Richard Socher on the future of deep learning
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

a13974654194 发表于 2016-12-2 19:26:35
什么是福,吃亏是福;什么是乐,知足常乐!
回复 支持 反对

使用道具 举报

访烟 发表于 2016-12-2 19:43:06
OMG!介是啥东东!!!
回复 支持 反对

使用道具 举报

ft450862351 发表于 2016-12-2 20:19:59
我为请帮我爱他转身!
回复 支持 反对

使用道具 举报

绿萝898 发表于 6 天前
支持你哈............
回复 支持 反对

使用道具 举报

杜峰 发表于 昨天 05:12
心里只有你一个频道,最可恨的是还没有广告。
回复 支持 反对

使用道具 举报

昔耶 发表于 昨天 06:30
蜘蛛会不会上吊?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表