一款由HTML5+jQuery打造的过滤归类排序特效,点击导航任意一个就可以进行下面的图片分类,一种洗牌的jquery特效。
兼容性也不错,IE6,IE7也可以进行分类,但是没有洗牌的效果。适用于浏览器:IE8+,google,firefox等。
可以作为一个照片分类页面,对照片进行快速的分类。
可以很清晰的找到自己想要的图片。
主要jquery代码如下:
1 $(function() { 2 var Page = (function() { 3 var $navArrows = $( '#nav-arrows' ).hide(), 4 $navDots = $( '#nav-dots' ).hide(), 5 $nav = $navDots.children( 'span' ), 6 $shadow = $( '#shadow' ).hide(), 7 slicebox = $( '#sb-slider' ).slicebox( { 8 onReady : function() { 9 10 $navArrows.show(); 11 $navDots.show(); 12 $shadow.show(); 13 }, 14 onBeforeChange : function( pos ) { 15 $nav.removeClass( 'nav-dot-current' ); 16 $nav.eq( pos ).addClass( 'nav-dot-current' ); 17 } 18 } ), 19 init = function() { 20 21 initEvents(); 22 }, 23 initEvents = function() { 24 // add navigation events 25 $navArrows.children( ':first' ).on( 'click', function() { 26 slicebox.next(); 27 return false; 28 } ); 29 $navArrows.children( ':last' ).on( 'click', function() { 30 slicebox.previous(); 31 return false; 32 } ); 33 $nav.each( function( i ) { 34 $( this ).on( 'click', function( event ) { 35 var $dot = $( this ); 36 if( !slicebox.isActive() ) { 37 $nav.removeClass( 'nav-dot-current' ); 38 $dot.addClass( 'nav-dot-current' ); 39 } 40 slicebox.jump( i + 1 ); 41 return false; 42 } ); 43 } ); 44 }; 45 return { init : init }; 46 })(); 47 Page.init(); 48 });
此特效的效果图如下: