欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery.gridrotator實現(xiàn)響應式圖片展示畫廊效果

 更新時間:2015年06月23日 11:00:39   投稿:hebedich  
本教程將教大家制作一個jQuery響應式圖片展示畫廊效果,所有圖片以網(wǎng)格的形式排列,然后定時隨機翻轉其中某些格子用來切換圖片。這種效果可以用來當做背景或裝飾放在我們的網(wǎng)站上。

 jquery.gridrotator是一款非常實用的響應式圖片展示畫廊插件。這款圖片展示畫廊插件將圖片像網(wǎng)格一樣排列,然后隨機將某個格子中的圖片翻轉顯示另一張圖片。共有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>

調(diào)用插件

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

注意別忘了引入jQuery和jquery.gridrotator.js文件。
可選參數(shù)

// 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    : []

當你定義網(wǎng)格大小的時候,你要注意的是不是所有的圖片都會在網(wǎng)格中立刻顯示。舉個例子,你有50張圖片,定義了4行5列,那么會有20張圖片在網(wǎng)格中顯示,其它30張用來做圖片翻轉切換。

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。

相關文章

最新評論