《基于jquery&css3的html5portfolio特效制作》由会员分享，可在线阅读，更多相关《基于jquery&css3的html5portfolio特效制作（10页珍藏版）》请在金锄头文库上搜索。
1、基于 jQuery / 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 Quicksandplugin: elem.attr(data-id,i); $.each(tags,function(key,value) / Removing extra whitespace: value = $.trim(value); if(!(value
2、 in itemsByTags) / Create an empty array to hold this item: itemsByTagsvalue = ; / Each item is added to one array per tag: itemsByTagsvalue.push(elem); ); ); 每个标签作为一个数组对象添加到 itemsByTags。 这意味着 itemsByTagsWeb Design将是包含所有项的数组。我们使用这个对象为 Quicksand 在页面上创建隐藏的无序列表。 script.js Part 2 function createList(tex
3、t,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(#contai
4、ner); / Creating a menu item. The unordered list isadded / as a data parameter (available via.data(list): var a= $(, html: text, href:#, data: list:ul ).appendTo(#filter); 此函数需要以分组的名称以及包含 LI 项的数组作为参数， 然后克隆这些项至新的 UL， 同时在绿色栏中添加链接。 现在我们需要遍历所有分组并调用上面的函数，同时监听菜单项上的点击事件。 script.js Part 3 / Creating the “Ev
5、erything” option in themenu: createList(Everything,items); / Looping though the arrays in itemsByTags: $.each(itemsByTags,function(k,v) createList(k,v); ); $(#filter a).live(click,function(e) var link = $(this); link.addClass(active).siblings().removeClass(active); / Using the Quicksand plugin to an
6、imate the liitems. / It uses data(list) defined by our createListfunction: $(#stage).quicksand(link.data(list).find(li); e.preventDefault(); ); / Selecting the first menu item by default: $(#filter a:first).click(); 现在，一切已经就绪，我们就可以继续页面造型设计。 CSS 页面样式本身并不是很有趣（你可以在 assets/css/styles.css 中看到） 。绿色导航栏（fil
7、terbar）使用:before/:after 伪元素在两端添加华丽的边角。由于它们也都是绝对定位的，他们也将随导航栏一同变化。 styles.css #filter background: url(“./img/bar.png”) repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align:center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #0
8、00; box-shadow:0 4px 4px #000; #filter:before, #filter:after background: url(“./img/bar.png”) no-repeat; height: 43px; position: absolute; top: 0; width: 78px; content: ”; -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box-shadow:0 2px 0 rgba(0,0,0,0.4); #filter
9、:before background-position: 0 -47px; left: -78px; #filter:after background-position: 0 0; right: -78px; #filter a color: #FFFFFF; display: inline-block; height: 39px; line-height: 37px; padding: 0 15px; text-shadow:1px 1px 1px #315218; #filter a:hover text-decoration:none; #filter a.active backgrou
10、nd: url(“./img/bar.png”) repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0.2), 1px 0 1px rgba(0,0,0,0.2) inset, -1px 0 1px rgba(0,0,0,0.2) inset; Before/After 元素 结论 您可以使用此模板来展示你的工作，它最好的一点就是，很容易进行定制。你唯一需要做的只是更改#stage list 的相应项目，并定义一些新的标签其余的工作都将由脚本去完成。如果没有启用 JavaScript，他们依然会看到你所有的内容，同样也是出于搜索引擎优化的目的。
