Welcome, Old Sport!

分类自动排列功能 CSS & jQuery

by ilikecss ON 2011/07/14 37521


网上有许多可以程序控制自动排列案件的效果,比如有个色彩的导航,你点哪个颜色就会罗列出该色系的项目。今天就给大家介绍这款项目分类排列的功能及插件。*请使用 Google Chrome、Mozilla Firefox、Safari、IE9查看预览。需要源文件的朋友请留下可用电子邮件地址。

Step1. 创建HTML

导航代码

<ul id="filtering-nav" class="filter-border">
    <li><a class="all border-radious-left on" href="#all"><span>All</span></a></li>
    <li><a class="berchtesgaden" href="#berchtesgaden"><span>berchtesgaden</span></a></li>      
    <li><a class="luzern border-radious-right" href="#luzern"><span>Luzern</span></a></li>                        
</ul>

#all, #berchtesgaden, #luzern 分类的ID名称

项目代码

<div class="work-box border-radious berchtesgaden">
    <div class="box-container-img border-radious-top">
        <img src="images/thumb/1345075_668082714.jpg" class="box-image" alt="Berchtesgaden">
        <a href="http://baike.baidu.com/view/758554.htm" class="launch" target="_blank"><span></span></a>
        <a href="http://p.kaixin001.com/privacy/photo/8/52/1345075_668085224.jpg" title="Koenigssee" data-images-group="Koenigssee" class="trabajos-info cboxElement"><span></span></a>
        <a class="cboxElement" href="http://p.kaixin001.com/privacy/photo/8/60/1345075_668086056.jpg" title="Koenigssee" data-images-group="Koenigssee"></a>
        <a class="cboxElement" href="http://p.kaixin001.com/privacy/photo/8/63/1345075_668086330.jpg" title="Koenigssee" data-images-group="Koenigssee"></a>
    </div>
    <p><span>Germany</span><strong>Berchtesgaden</strong></p>                    
</div>

class=”launch”含有链接地址的项目

class=”launch-images”没有链接地址的项目

data-images-group改组项目的ID号,没组项目都要不同

Step2. 插入jQuery和脚本包

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_include.js"></script>
30条评论
  1. #1

    lz什么的最好了说道:

    这个分类的效果非常棒啊,可惜没有下载链接~

  2. #2

    Marvin说道:

    最近想要改一下我们研究组的页面。后面组员的照片什么的,想用一下博主的这套代码。所以留个邮箱,索要源文件,谢谢博主。emptymalei@yahoo.cn

  3. #3

    nightwish说道:

    麻烦博主发我一套~~感谢~

  4. #4

    slutefood说道:

    好棒的效果 麻烦也发我一套 miwei_goodlife@163.com 谢谢

  5. #5

    MCKelvin说道:

    求源码包。Email如在上btw,楼主可以参考下 http://www.tutorialzine.com/ 这个站点,加上download按钮~~~

  6. #6

    amonyous说道:

    麻烦给我也发一套,好人~

  7. #7

    LD说道:

    谢谢博主提供这么好的东西,从你这里学了很多:),我也想要这个源码,发给我一份吧。zziald@yahoo.com.cn

  8. #8

    tang说道:

    麻烦您给我分享一份,非常感谢!tangcsu@qq.com!

  9. #9

    yixinx说道:

    求源码包~~~多谢楼主。。。。。yixinx@126.com

  10. #10

    ikaka说道:

    很喜欢 能发给我一套吗?谢谢了。

  11. #11

    lokey说道:

    效果非常棒,我也想要一份,劳博主分享下。多谢!

  12. #12

    evenlym说道:

    可以發給我嗎~謝謝^^

  13. #13

    ares说道:

    效果很棒,值得学习,请楼主留一份给我 faceless@126.com

  14. 你咋整了这么多好东东啊,呵呵。

  15. #15

    JASON_钱说道:

    博主的东西很全面,而且写得很细致,非常喜欢!需要这个的源代码可以以分享一下吗? :roll:
    qian.xszlq@gmail.com

  16. #16

    sky说道:

    版主您好,
    下載的連結已經失效了,可以麻煩您寄一份給我嘛?謝謝 :D

  17. #17

    tony说道:

    求源码··楼主··

  18. #18

    slj说道:

    麻烦发一份吧 :!:




TOP