jquery.gridrotator实现响应式图片展示画廊效果


Posted in Javascript onJune 23, 2015

 jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。

HTML结构:

HTML结构非常简单。

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
  <ul>
    <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
    <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
    <!-- ... -->
  </ul>
</div>

调用插件

$(function() {     
  $( '#ri-grid' ).gridrotator();
});

注意别忘了引入jQuery和jquery.gridrotator.js文件。
可选参数

// number of rows
rows      : 4,
 
// number of columns 
columns     : 10,
 
// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024      : {
  rows  : 3,
  columns : 8
},
 
w768      : {
  rows  : 3,
  columns : 7
},
 
w480      : {
  rows  : 3,
  columns : 5
},
 
w320      : {
  rows  : 2,
  columns : 4
},
 
w240      : {
  rows  : 2,
  columns : 3
},
 
// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step      : 'random',
maxStep     : 3,
 
// prevent user to click the items
preventClick  : true,
 
// animation type
// showHide || fadeInOut || slideLeft || 
// slideRight || slideTop || slideBottom || 
// rotateLeft || rotateRight || rotateTop || 
// rotateBottom || scale || rotate3d || 
// rotateLeftScale || rotateRightScale || 
// rotateTopScale || rotateBottomScale || random
animType    : 'random',
 
// animation speed
animSpeed    : 500,
 
// animation easings
animEasingOut  : 'linear',
animEasingIn  : 'linear',
 
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval    : 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow    : true,
// if true the items will switch when hovered
onhover   : false,
// ids of elements that shouldn't change
nochange    : []

当你定义网格大小的时候,你要注意的是不是所有的图片都会在网格中立刻显示。举个例子,你有50张图片,定义了4行5列,那么会有20张图片在网格中显示,其它30张用来做图片翻转切换。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
搭建pomelo 开发环境
Jun 24 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 #Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 #Javascript
Js+php实现异步拖拽上传文件
Jun 23 #Javascript
javascript框架设计之类工厂
Jun 23 #Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 #Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 #Javascript
简述AngularJS相关的一些编程思想
Jun 23 #Javascript
You might like
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP下对数组进行排序的函数
2010/08/08 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
php实现倒计时效果
2015/12/19 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python 列表list使用介绍
2014/11/30 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python事件驱动event实现详解
2018/11/21 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
高中生物教学反思
2014/02/05 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
刊首寄语大全
2014/04/11 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
清洁工个人工作总结
2015/03/05 职场文书
永不妥协观后感
2015/06/10 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL