jquery.gridrotator是一款非常实用的响应式图片展示画廊插件。这款图片展示画廊插件将图片像网格一样排列,然后随机将某个格子中的图片翻转显示另一张图片。共有6种效果。
HTML结构:
HTML结构非常简单。
rush:js;">
$(function() {
$( '#ri-grid' ).gridrotator();
});
注意别忘了引入jQuery和jquery.gridrotator.js文件。 可选参数
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张用来做图片翻转切换。
以上所述就是本文的全部内容了,希望大家能够喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。