JQuery 图片分类排序, 预览切换点击放大效果
  立即下载

载入js

  1. /*无刷新快速排序分类*/
  2. <script type="text/javascript" src="js/jquery.quicksand.js"></script>
  3. <script type="text/javascript" src="js/jquery.easing.js"></script>
  4. /*点击图片放大*/
  5. <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
  6. /*调用*/
  7. <script type="text/javascript" src="js/script.js"></script>

图片列表html

  1. <ul class="portfolio-categ filter">
  2. <li>选择分类:</li>
  3. <li class="all active"><a href="#">All</a></li>
  4. <li class="cat-item-1"><a href="#" title="Category 1">分类 1</a></li>
  5. <li class="cat-item-2"><a href="#" title="Category 2">分类 2</a></li>
  6. <li class="cat-item-3"><a href="#" title="Category 3">分类 3</a></li>
  7. <li class="cat-item-4"><a href="#" title="Category 4">分类 4</a></li>
  8. <li class="cat-item-5"><a href="#" title="Category 5">分类 5</a></li>
  9. </ul>
  10. <ul class="portfolio-area">
  11. <li class="portfolio-item2" data-id="id-0" data-type="cat-item-1">
  12. <div>
  13. <span class="image-block">
  14. <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>
  15. </span>
  16. <div class="home-portfolio-text">
  17. <h2 class="post-title-portfolio"><a href="#">素材火</a></h2>
  18. <p class="post-subtitle-portfolio">www.sucaihuo.com/</p>
  19. </div>
  20. </div>
  21. </li>
  22. <li class="portfolio-item2" data-id="id-1" data-type="cat-item-2">
  23. <div>
  24. <span class="image-block">
  25. <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>
  26. </span>
  27. <div class="home-portfolio-text">
  28. <h2 class="post-title-portfolio"><a href="#">极资源</a></h2>
  29. <p class="post-subtitle-portfolio">www.junphp.com</p>
  30. </div>
  31. </div>
  32. </li>
  33. </ul>

 

/*图片排序js参数*/

  1. var options = {
  2. duration: 750,
  3. easing: 'swing',
  4. attribute: 'data-id',
  5. adjustHeight: 'auto',
  6. useScaling: true,
  7. enhancement: function(c) {},
  8. selector: '> *',
  9. dx: 0,
  10. dy: 0
  11. };
相关评论(0)
您是不是忘了说点什么?

友情提示:垃圾评论一律封号...

还没有评论,快来抢沙发吧!