本文提供了一种在Html5中添加切换缩略图和列表模式的插件教程，通过修改class实现视图切换。示例代码详细展示了如何通过jQuery响应按钮点击事件，动态改变页面布局。此外，还介绍了如何随机设置图片和交互元素的数值。
一、Html结构
<main id='container'>
<header id='header'>
<span>View:</span>
<button class='view-list'>List</button>
<button class='view-grid'>Grid</button>
</header>
<ol class='grid' id='frame'>
<li class='frame'>
<div class='inset'>
<div class='image'></div>
<div class='info'>
<div class='title'>Lorem Ipsum</div>
<div class='description'></div>
<div class='shares'>
<div class='icon-lik likes'></div>
<div class='icon-ask comments'></div>
</div>
</div>
</div>
</li>
</ol>
<main id='container'>
<header id='header'>
<span>View:</span>
<button class='view-list'>List</button>
<button class='view-grid'>Grid</button>
</header>
<ol class='grid' id='frame'>
<li class='frame'>
<div class='inset'>
<div class='image'></div>
<div class='info'>
<div class='title'>Lorem Ipsum</div>
<div class='description'></div>
<div class='shares'>
<div class='icon-lik likes'></div>
<div class='icon-ask comments'></div>
</div>
</div>
</div>
</li>
</ol>
最低0.47元/天 解锁文章
扫一扫
2975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
