jQuery选项卡过滤图片类型

jQuery筛选图片列表,根据不同类型，切换到对应的图片，而且鼠标悬浮在图片上有高亮效果。

淘建站为您提供更多_表单代码_筛选_筛选_过滤，在此特别感谢您对我们的支持与厚爱！

选项卡html代码

<ul class="menu">
    <li class="selected"><a href="javascript:void(0);" rel="all">所有教程</a></li>
    <li><a href="javascript:void(0);" rel="jquery">jQuery教程</a></li>
    <li><a href="javascript:void(0);" rel="css">CSS教程</a></li>
    <li><a href="javascript:void(0);" rel="js">js教程</a></li>
</ul>

对应的类型加上父级的rel属性值

<ul class="item clearfix">
    <li rel="jquery"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="jquery 表格插件控制表格表格内容拖动标题固定在顶部" src="images/smalleae540b12f576c7114edc04a14b6900a.jpg" /></a></li>
    <li rel="jquery"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="jquery动画导航菜单制作二级菜单slide向上滑动显示" src="images/small22d6714370417ccad4fa437553912c58.jpg" /></a></li>
    <li rel="css"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="css3教程基础知识圆角,阴影,渐变,阴影,旋转,transition" src="images/small30ba839d0b60ce14a750081258ece930.jpg" /></a></li>
    <li rel="css"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="css3垂直滑动手风琴导航菜单多种手风琴演示" src="images/small628fa1ffa5a42a4acf3ca25dcfaf8551.jpg" /></a></li>
    <li rel="js"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="js文字滚动插件制作双行关联向上文字间隙滚动" src="images/small8c9e75ce24ea85b5b972749a289283c9.jpg" /></a></li>
    <li rel="jquery"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="jquery文字大小排列效果插件文字变大缩小" src="images/small13bdebfd78c3d341122331cbeb87cc3a.jpg" /></a></li>
    <li rel="css"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果" src="images/small35169b61f4c432af0529c6161db6372e.jpg" /></a></li>
    <li rel="js"><a href="http://www.sucaiq.com/" target="_blank"><img width="150" height="150" alt="js文字切换特效制作焦点文字带滤镜切换效果" src="images/small61ce0388a256bfb0111af25f754f478d.jpg" /></a></li>
</ul>

选项卡切换动画效果

$('.menu li a').click(function() {
    $('.menu li').removeClass('selected');
    $(this).parent('li').addClass('selected');
    thisItem = $(this).attr('rel');
    if (thisItem != "all") {
        $('.item li[rel=' + thisItem + ']').stop().animate({'width': '160px', 'opacity': 1, 'marginRight': '.5em', 'marginLeft': '.5em'});
        $('.item li[rel!=' + thisItem + ']').stop().animate({'width': 0, 'opacity': 0, 'marginRight': 0, 'marginLeft': 0});
    } else {
        $('.item li').stop().animate({'opacity': 1, 'width': '160px', 'marginRight': '.5em', 'marginLeft': '.5em'});
    }
});

$('.item li img').animate({'opacity': 0.5}).hover(function() {
    $(this).animate({'opacity': 1});
}, function() {
    $(this).animate({'opacity': 0.5});
});