设置项的视图我们将创建两个分离的部分,首先是导航,最后一个项目列表。导航将包含锚链接导航项目的可见性,而项目列表将包含条目将显示和隐藏图像。现在,创建导航和项列表如以下脚本:
每个导航和项rel属性,代表每个类别。目的是当用户选择一个导航项将显示只有一个项目具有相同的rel属性的导航,其他人将被隐藏。首先我们将样式导航,设置列表显示与inline-block无序列表将显示水平。如果用户选择一个导航,我们将添加“选择”类名。“选择”风格与css和边境radisu有绿色背景,因此,选择导航与兄弟姐妹会有不同的风格。ul.menu { margin-left: .5em; margin-bottom: 1em; } ul.menu li { list-style-type: none; display: inline-block; font-weight: bold; text-shadow: 1px 1px 0px #f3f5da; padding: 2px 15px; } .selected { -webkit-border-radius: 15px; -moz-border-radius: 5px; border-radius: 5px; background: #acac75; -webkit-box-shadow: 1px 1px 0px #8c8c5d; } .selected a, .selected a:visited { text-shadow: 1px 1px 0px #8c8c60; color: #fff; } 样式物品的图片,与块设置每个项目显示,列表风格类型的浮动与左和保证金0.5 em。每个图像列表内将有5像素白色边界厚度、边界半径5像素也盒阴影。ul.item li { list-style-type: none; display: block; float: left; margin: .5em; } ul.item li img { border: 5px solid #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 0px 5px #ac987e; -moz-box-shadow: 0px 0px 5px #ac987e; box-shadow: 0px 0px 5px #ac987e; } 滑动效果动画()幻灯片的效果将火当用户单击导航,所以我们将添加点击事件。之后,删除“选择”从所有导航类名称并将它添加到选定的导航。这将使选定的导航将有不同的风格和它的兄弟姐妹。$('.menu li a').click(function() { $('.menu li').removeClass('selected'); $(this).parent('li').addClass('selected'); 接下来,rel属性值并检查它。如果该值为“所有”(这意味着显示所有图片项)我们将显示所有图像项目,如果该值为其他项目,我们将搜索任何形象同样rel属性值和显示然后隐藏。thisItem = $(this).attr('rel'); if(thisItem != "all") { $('.item li[rel='+thisItem+']').stop() .animate({'width' : '110px', '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' : '110px', 'marginRight' : '.5em', 'marginLeft' : '.5em' }); } }) 为隐藏上面的兄弟姐妹我们使用相同的技术,除了动画属性的值,每个动画属性的值设置为0。在这一点上我们的项目将使用幻灯片显示和隐藏效果,引发的导航。我们要做的最后一件事是使图像项目顺利通过调整其透明度。使用动画和设置每张图片透明度为50%徘徊切换事件,如果用户徘徊,激活其透明度为100%,恢复其价值当用户徘徊在50%。$('.item li img').animate({'opacity' : 0.5}).hover(function() { $(this).animate({'opacity' : 1}); }, function() { $(this).animate({'opacity' : 0.5}); }); 好吧,就这样。感谢你的阅读,希望对你有用 ![jquery过滤图片显示]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
未经允许不得转载：
ICode联盟 »
插件特效 »
jquery过滤图片显示
