jQuery切换缩略图模式和列表模式插件-插件特效-星河码客

这个jQuery插件的作用是在缩略图模式和列表模式之间可以来回切换。这种缩略图模式和列表模式的切换效果在大多数的商城网站上都可以看到。使用该jQuery插件就可以实现这个效果。HTML这款插件中的缩略图网格和列表采用了有序列表来制作，你可以根据需要改变这些html结构。每一个class为frame的li待表一张缩略图或一个列表项。插件中还使用了jquery ui。插件中精美的插图来自于花瓣。

Lorem Ipsum

......

引入jQuery和jQuery UI文件。$('#header button').on('click',function(){ if ( $(this).hasClass('view-list') ) { $('#frame').removeClass('grid').addClass('list'); } else if ( $(this).hasClass('view-grid') ) { $('#frame').removeClass('list').addClass('grid'); }});$('.frame').each(function(){ var images = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg','6.jpg']; $(this).find('.image') .css({ 'background-image': 'url('+images[Math.floor(Math.random()*images.length)]+')' }); var like = 100, likes = Math.floor(Math.random() * like) + 1; $(this).find('.likes').text(likes); var comment = 50, comments = Math.floor(Math.random() * comment) + 1; $(this).find('.comments').text(comments);});

jQuery切换缩略图模式和列表模式插件

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»