HTML5+jQuery打造的过滤归类排序特效

一款由HTML5+jQuery打造的过滤归类排序特效,点击导航任意一个就可以进行下面的图片分类,一种洗牌的jquery特效。

兼容性也不错,IE6,IE7也可以进行分类，但是没有洗牌的效果。适用于浏览器：IE8+,google,firefox等。

可以作为一个照片分类页面，对照片进行快速的分类。

可以很清晰的找到自己想要的图片。

主要jquery代码如下：

$(function() {
                var Page = (function() {
                    var $navArrows = $( '#nav-arrows' ).hide(),
                        $navDots = $( '#nav-dots' ).hide(),
                        $nav = $navDots.children( 'span' ),
                        $shadow = $( '#shadow' ).hide(),
                        slicebox = $( '#sb-slider' ).slicebox( {
                            onReady : function() {

                                $navArrows.show();
                                $navDots.show();
                                $shadow.show();
                            },
                            onBeforeChange : function( pos ) {
                                $nav.removeClass( 'nav-dot-current' );
                                $nav.eq( pos ).addClass( 'nav-dot-current' );
                            }
                        } ),    
                        init = function() {

                            initEvents();    
                        },
                        initEvents = function() {
                            // add navigation events
                            $navArrows.children( ':first' ).on( 'click', function() {
                                slicebox.next();
                                return false;
                            } );
                            $navArrows.children( ':last' ).on( 'click', function() {                                
                                slicebox.previous();
                                return false;
                            } );
                            $nav.each( function( i ) {
                                $( this ).on( 'click', function( event ) {    
                                    var $dot = $( this );                                
                                    if( !slicebox.isActive() ) {
                                        $nav.removeClass( 'nav-dot-current' );
                                        $dot.addClass( 'nav-dot-current' );
                                    }
                                    slicebox.jump( i + 1 );
                                    return false;
                                } );
                            } );
                        };
                        return { init : init };
                })();
                Page.init();
            });

此特效的效果图如下：

特效来源地址：http://www.jqshare.com/Jq/fondone/id/103.html