HTML5对处理一些简单的动画非常方便，比如移动、淡入淡出效果等。今天分享的这款HTML5图片组合归类特效就应用了HTML5的移动特效，当用户选择一个图片分类时，相关分类的图片就会移动到这个分类下面，并伴随着淡入淡出的移动动画，是一款效果很酷的HTML5图片处理应用。$(document).ready(function(){ var items = $('#stage li'), itemsByTags = {}; // Looping though all the li items: items.each(function(i){ var elem = $(this), tags = elem.data('tags').split(','); // Adding a data-id attribute. Required by the Quicksand plugin: elem.attr('data-id',i); $.each(tags,function(key,value){ // Removing extra whitespace: value = $.trim(value); if(!(value in itemsByTags)){ // Create an empty array to hold this item: itemsByTags[value] = []; } // Each item is added to one array per tag: itemsByTags[value].push(elem); }); }); // Creating the "Everything" option in the menu: List('Everything',items); // Looping though the arrays in itemsByTags: $.each(itemsByTags,function(k,v){ List(k,v); }); $('#filter a').live('click',function(e){ var link = $(this); link.addClass('active').siblings().removeClass('active'); // Using the Quicksand plugin to animate the li items. // It uses data('list') defined by our List function: $('#stage').quicksand(link.data('list').find('li')); e.preventDefault(); }); $('#filter a:first').click(); function List(text,items){ // This is a helper function that takes the // text of a menu button and array of li items // Creating an empty unordered list: var ul = $('
- ',{'class':'hidden'}); $.each(items,function(){ // Creating a copy of each li item // and adding it to the list: $(this).clone().appendTo(ul); }); ul.appendTo('#container'); // Creating a menu item. The unordered list is added // as a data parameter (available via .data('list'): var a = $('',{ html: text, href:'#', data: {list:ul} }).appendTo('#filter'); }});