html点击切换背景加缩略图,jQuery切换缩略图模式和列表模式插件

这是一个基于jQuery的插件,允许用户在缩略图网格和列表视图之间自由切换。HTML结构使用有序列表实现,每个'frame'类的li元素代表一个项目。插件还整合了jQuery UI,并用随机图片和点赞、评论数量模拟数据。点击按钮即可在视图间切换。
摘要由CSDN通过智能技术生成

这是一款可以在缩略图模式和列表模式之间来回切换的jQuery插件。

HTML

这款插件中的缩略图网格和列表采用了有序列表来制作,你可以根据需要改变这些html结构。每一个class为frame的li待表一张缩略图或一个列表项。插件中还使用了jquery ui。

插件中精美的插图来自于花瓣。

View:

List

Grid

  1. 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);

});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值