载入js
- /*无刷新快速排序分类*/
- <script type="text/javascript" src="js/jquery.quicksand.js"></script>
- <script type="text/javascript" src="js/jquery.easing.js"></script>
- /*点击图片放大*/
- <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
- /*调用*/
- <script type="text/javascript" src="js/script.js"></script>
图片列表html
- <ul class="portfolio-categ filter">
- <li>选择分类:</li>
- <li class="all active"><a href="#">All</a></li>
- <li class="cat-item-1"><a href="#" title="Category 1">分类 1</a></li>
- <li class="cat-item-2"><a href="#" title="Category 2">分类 2</a></li>
- <li class="cat-item-3"><a href="#" title="Category 3">分类 3</a></li>
- <li class="cat-item-4"><a href="#" title="Category 4">分类 4</a></li>
- <li class="cat-item-5"><a href="#" title="Category 5">分类 5</a></li>
- </ul>
- <ul class="portfolio-area">
- <li class="portfolio-item2" data-id="id-0" data-type="cat-item-1">
- <div>
- <span class="image-block">
- <a class="image-zoom" href="images/big/b1.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/1.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
- </span>
- <div class="home-portfolio-text">
- <h2 class="post-title-portfolio"><a href="#">素材火</a></h2>
- <p class="post-subtitle-portfolio">www.sucaihuo.com/</p>
- </div>
- </div>
- </li>
- <li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">
- <div>
- <span class="image-block">
- <a class="image-zoom" href="images/big/b2.jpg" rel="prettyPhoto[gallery]" title="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张"><img width="225" height="140" src="images/thumbs/2.jpg" alt="jquery相册代码 画廊效果 支持动画切换排序点击放大切换下一张" /></a>
- </span>
- <div class="home-portfolio-text">
- <h2 class="post-title-portfolio"><a href="#">极资源</a></h2>
- <p class="post-subtitle-portfolio">www.junphp.com</p>
- </div>
- </div>
- </li>
- </ul>
/*图片排序js参数*/
- var options = {
- duration: 750,
- easing: 'swing',
- attribute: 'data-id',
- adjustHeight: 'auto',
- useScaling: true,
- enhancement: function(c) {},
- selector: '> *',
- dx: 0,
- dy: 0
- };
上一篇:
JQuery 实现电影院在线选座特效
下一篇:
JQuery 仿天猫导航效果
友情提示:垃圾评论一律封号...