ajax栅格数据库图片,可拖动网格图片插件-DRAGGABLE IMAGE BOXES GRID

插件描述：今天我要给大家介绍的是一款全屏图片网格插件。我们可以用鼠标来拖动图片网格的可视区平滑移动。当我们点击某张图片的时候，该图片会全屏放大以供用户查看。

今天我要给大家介绍的是一款全屏图片网格插件。我们可以用鼠标来拖动图片网格的可视区平滑移动。当我们点击某张图片的时候，该图片会全屏放大以供用户查看。

使用步骤

1、引入以下的js和css文件

2、在head标签中加入以下js代码,由于JS代码比较多，所以只截取了其中一部分，完整的代码可参见Demo源码

$(function() {

var $ibWrapper = $('#ib-main-wrapper'),

Template= (function() {

// true if dragging the container

var kinetic_moving = false,

// current index of the opened item

current = -1,

// true if the item is being opened / closed

isAnimating = false,

// items on the grid

$ibItems = $ibWrapper.find('div.ib-main > a'),

// image items on the grid

$ibImgItems = $ibItems.not('.ib-content'),

// total image items on the grid

imgItemsCount = $ibImgItems.length,

init = function() {

// add a class ib-image to the image items

$ibImgItems.addClass('ib-image');

// apply the kinetic plugin to the wrapper

loadKinetic();

// load some events

initEvents();

},

................

});

3、在body标签中加入以下格式的html代码

          Crabbed Age and Youth    Cannot live together  

Welcome Howdy, Stranger

 ...

其它的我就不多介绍了，大家有兴趣可以自己去了解。