【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

标签: HTML5 技术博文 HTML5前沿技术 HTML5学习资源 | 发表时间:2012-05-09 10:58 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

在本教程中,我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效。它支持定制,因此,你完全可以扩展实现更多功能。

【e800编译】在本教程中,我们将完成一个不错的基于 jQuery和Quicksand插件的HTML5portfolio特效。它支持定制,因此,你完全可以扩展实现更多功能。你可在页面上展示各种分类的图片,它可把内容按不同的分类筛选显示出来,并在显示过程中附加动画效果,不但分类了图片,也使页面更加生动。

HTML

首先,第一步你需要创建一个新的 HTML5标记文档。在<head>区域需要包括页面的样式,jQuery库,Quicksand插件以及script.js。

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″  />

<title>Making a Beautiful HTML5  Portfolio |TutorialzineDemo </title>

<!– Our CSS stylesheet file –>

<link rel=”stylesheet” href=”assets/css/styles.css”  />

<!– Enabling HTML5 tags for older IE browsers–>

<!–[if lt IE 9]>

<scriptsrc=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

<![endif]–>

</head>

<body>

<header>

<h1>My Portfolio </h1>

</header>

<nav id=”filter” >

<!– The menu items will go here (generated by jQuery)–>

</nav>

<section id=”container” >

<ul id=”stage” >

<!– Your portfolio items go here –>

</ul>

</section>

<footer>

</footer>

<!– Including jQuery, the Quicksand plugin, and our ownscript.js–>

<scriptsrc=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js” ></script>

<script src=”assets/js/jquery.quicksand.js” ></script>

<script src=”assets/js/script.js” ></script>

</body>

</html>

在<body>中,包含一系列新的HTML5元素。header中含h1标题(logo样式),section元素中包含内容项的无序列表(后面你可以看到更多的列表由jQuery添加)以及nav元素。

#stage 无序列表中包含了所有的文件项,这些文件项如下所示。其中每一项都包含一个HTML5数据属性,它定义了一系列以逗号分隔的标签。最后,当我们通过jQuery来循环遍历该列表时,我们将记录标记并创建绿色条栏中可选的分类。

<li data-tags=”PrintDesign” >

<img src=”assets/img/shots/1.jpg”  />

</li>

<li data-tags=”LogoDesign,Print Design” >

<img src=”assets/img/shots/2.jpg”  />

</li>

<li data-tags=”WebDesign,Logo Design” >

<img src=”assets/img/shots/3.jpg”  />

</li>

现在你可以放入任何你想要展示内容项,并进一步自定义组合。Quicksand插件会实现这个列表的动画过渡,你可以自由选择去尝试。

[ Demo]   [ Download]

jQuery

Quicksand插件在于比较两个无序内容列表,找到他们里面匹配的LIS,并以动画形式将其放至它新的位置。至于jQuery脚本,我们需要将它写在本节中,它将循环遍历#stage列表中的内容项,并为它所找到的每个标签创建一个新的(隐藏)无序列表。同时,它还将创建一个新的菜单选项,由其触发两个列表间的Quicksand过渡。

首先,我们需要监听ready事件(加载页面最早的点,在这里我们可以访问DOM),检查相关标记并循环遍历所有项。

script.js– Part 1

$(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 Quicksandplugin:

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);

});

});

每个标签作为一个数组对象添加到itemsByTags。这意味着itemsByTags['Web Design']将是包含所有项的数组。我们使用这个对象为Quicksand在页面上创建隐藏的无序列表。

script.js– Part 2

function createList(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 = $(‘<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 isadded

// as a data parameter (available via.data(‘list’)):

var a= $(‘<a>’,{

html: text,

href:’#',

data: {list:ul}

}).appendTo(‘#filter’);

}

此函数需要以分组的名称以及包含LI项的数组作为参数,然后克隆这些项至新的UL,同时在绿色栏中添加链接。

现在我们需要遍历所有分组并调用上面的函数,同时监听菜单项上的点击事件。

script.js– Part 3

// Creating the “Everything” 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 animate 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中看到)。绿色导航栏(#filterbar)使用:before/:after伪元素在两端添加华丽的边角。由于它们也都是绝对定位的,他们也将随导航栏一同变化。

styles.css

#filter {

background: url(“../img/bar.png”)  repeat-x 0 -94px;

displayblock;

height: 39px;

margin: 55px  auto;

positionrelative;

width: 600px;

text-align: center;

-moz-box-shadow:0 4px 4px #000;

-webkit-box-shadow:0 4px 4px #000;

box-shadow:0 4px 4px #000;

}

#filter:before, #filter:after {

background: url(“../img/bar.png”)  no-repeat;

height: 43px;

positionabsolute;

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:before {

background-position: 0 -47px;

left: -78px;

}

#filter:after {

background-position: 0 0;

right: -78px;

}

#filter  a{

color: #FFFFFF;

displayinline- block;

height: 39px;

line-height: 37px;

padding: 0 15px;

text-shadow:1px 1px 1px #315218;

}

#filter  a:hover{

text-decoration: none;

}

#filter  a.active{

background: 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,他们依然会看到你所有的内容,同样也是出于搜索引擎优化的目的。

原文链接: http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/

 

相关 [jquery css3 html5] 推荐:

HTML5+CSS3+jQuery制作视频播放器完全指南

- - 博客 - 伯乐在线
导读:毫无疑问HTML5已经是大势所趋,知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash. 虽然国内还没有完全普及HTML5 浏览器,但在各大本土浏览器厂商的努力下,支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中. 本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器.

【转载】基于jQuery&CSS3的HTML5 portfolio特效制作

- - HTML5研究小组
在本教程中,我们将完成一个不错的基于jQuery和Quicksand插件的HTML5 portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能. 【e800编译】在本教程中,我们将完成一个不错的基于. jQuery和Quicksand插件的HTML5portfolio特效. 它支持定制,因此,你完全可以扩展实现更多功能.

zSlide-基于CSS3/HTML5演示文档jQuery插件

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2136. jquery.zSlide.js是我 zhangxinxu最近折腾的一个jQuery插件,借助于CSS3和HTML5的一些新特性,在浏览器中实现类似于powerpoint幻灯片展示. 无论是在公司内部,还是在一些技术会议上,我们做分享的时候,用的最多的想必是powerpoint.

HTML5 & CSS3 研究文档

- Kings - 幸福收藏夹
已经说了好久,一直没把这个文件夹分享出来. 这是我去年第四季度里做的,里面有 11 一个文档. 包括 HTML5 中最主要的 JS API 文档,还有 CSS3 中两个比较难的属性. 主要还停留在纯 API 层面上的研究,没有深入到应用中去. 不过,当做工具来使用,和入门文档,还是不错的. 特别是其中的 HTML5 JS API 文档.

HTML5 和 CSS3 书籍推荐

- - 我爱水煮鱼
HTML5 和 CSS3 是下一代 Web 开发标准,无论是针对内容结构还是媒体,HTML5 都引进了各种新元素. 今天大多数的现代浏览器的都已经支持 HTML5 和 CSS3,学习体验 HTML5 和 CSS3 给 Web 开发的便捷、快速和强大功能是每一位 Web 设计和开发人员的当务之急. 现在网上已经有很多关于 HTML5 和 CSS3 的网站,包括介绍、教程以及使用技巧等等.

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
  转载请注明原创地址: http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html.   demo查看地址: http://www.webdesignerwall.com/demo/media-queries/.   CSS2允许你对特定media类型制定样式,例如针对屏幕或者打印机.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

HTML5和CSS3:网页设计的框架

- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设,网页上一些元素看起来和草稿中相对应元素不完全一样,客户端会发现那些字体定位上的细微的区别.

22个HTML5和CSS3表单教程

- 幻幽 or A書 - 伯乐在线 -博客
  利用HTML5和CSS3,还有一些出色的说明文档,你可以做些有创造力的网页表单. 因此,本文整理综合了22个CSS3表单教程.   点击各个小标题下方图片,即可进入相应英文教程.   你可能对以下文章也感兴趣.   成为一个顶级设计师的8个秘诀  .   10个令人印象深刻的JavaScript动画效果网站.

23个优秀的HTML5/CSS3教程

- - 可咔酷 | 网络杂货铺
HTML5/CSS3无疑是未来Web发展的方向,这一点在移动互联网领域已经得到了充分的证明. 如果你也是一名web开发者,想要深入了解关于HTML5和CSS3的话,你不妨看看下面这些教程. 这里有23个不错的HTML5/CSS3教程(有的使用了jQuery),这些教程来自于国外的一些优秀的web开发者和设计师,相信看完之后你一定会学到不少东西.