使用方法：

首先下载JS文件

0.0.8a.js (未压缩版本)
0.0.8a-min.js (压缩版)

英文说明

之后在页面中引用代码：

<!–[if IE 6]>
<script type=”text/javascript” src=”下载下来的JS路径”></script>
<script>
DD_belatedPNG.fix(‘CSS选择器, 应用类型’);
</script>
<![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和background两种）。

如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。

这些可以简写成 DD_belatedPNG.fix(‘#box-one, .header, img,background’);  。

更多选择器的如 DD_belatedPNG.fix(‘#box-one, .header,#footer,.box-two a:hover, img,background’);  等等。

另外，为解决IE6下背景图闪烁，可以在页面中添加如下脚本

<!–[if IE 6]>
<script type=”text/javascript”>
// <![CDATA[
if((window.navigator.appName.toUpperCase().indexOf("MICROSOFT")>=0)&&(document.execCommand))
try{
document.execCommand("BackgroundImageCache", false, true);
}
catch(e){}
// ]]>
</script>
<![endif]–>

Alright, let’s get into the tutorial

This time, we are going to make a custom content slider. I implemented this in my recent project and I’m pretty happy about it. My colleague spiced it up a little bit with some nice buttons. The way it works is quite simple, we will have a UL list with 3 buttons and each of the button has a link with a reference to the right panel. How it scroll to the correct panel? It uses jQuery scroll-To plugin. Basically you just have to pass the ID of the panel to the scroll-To plugin, and it will sroll the content to the correct position.

For more information about the plugin, please visit the scrollTo plugin website

1. HTML

HTML is a little bit long this time. Basically, it has two sections:

• UL List: This is the list of buttons, you can add as many as you want, or style the layout the way you want.
• Slider: Slider is where we put all the content for the panels, in this case, we have 3 panels with unique ID panel-1, panel-2 and panel-3. We hide the panel with overflow hidden set in the Mask Div.

<div id="hero-slider">
<ul>
<li><a href="#" rel="#panel-1">Item 1</a></li>
<li><a href="#" rel="#panel-2">Item 2</a></li>
<li><a href="#" rel="#panel-3">Item 3</a></li>
</ul>
<div>
<div>
<div id="panel-1">
<h2>Title 1</h2>
<p>Paragraph</p>
</div>
<div id="panel-2">
<h2>Title 2</h2>
<p>Paragraph</p>
</div>
<div id="panel-3">
<h2>Title 3</h2>
<p>Paragraph</p>
</div>
</div>
</div> <!-- .mask -->
<div></div>
</div> <!-- #hero-slider -->
2. CSS

The only tricky part of the CSS would be the mask. You have to make sure it has overflow set to hidden to hide panels. Also, the dimension of the panel and mask must be the same.

#hero-slider {
text-align:left;
background-color:#efefef;
border:1px solid #ccc; width:450px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
margin:0 auto;
font-family:arial;
}

#hero-slider .mask {
float:left;
width:300px;
height:280px;
margin:15px 0 0 10px;
overflow:hidden;
}

#hero-slider .panel {
width:300px;
height:280px;
text-align:left;
}

#hero-slider ul {
margin:0;
padding:15px 15px 0 15px;
list-style:none;
float:left;
border-right:1px solid #dedede;
height:285px;
}

#hero-slider ul li {
margin:10px 0;
}

#hero-slider ul a {
outline:none;
text-decoration: underline;
display:block;
width:75px;
height:74px;
text-indent:-999em;
}

#hero-slider a {
background: url(button.png) no-repeat 0 0;
}

#hero-slider ul a.active {
background-position: -75px;
}

.panel h2 {
padding:15px 0 0 0;
color:#0058a9;
}

.panel p {
color:#666;
}

.clear {clear:both}

3. Javascript

Javascript is short and simple, I have added comments to explain every line of the javascript

//append click event to the UL list anchor tag
$(‘#hero-slider ul a’).click(function () {
//reset all the items
$(‘#hero-slider ul a’).removeClass(‘active’);

//set current item as active
$(this).addClass(‘active’);

//scroll it to the right position
$(‘.mask’).scrollTo($(this).attr(‘rel’), 300);

//disable click event
return false;

});

演示| 下载

Blob

Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity.

Bubble

Generate colorful bubbles using HTML5 and of course with a magic touch of javascript.

jParallax

Awesome jParallax. I have been wanted to use this in my projects, but still haven’t got the chance yet. It’s a plugin and it’s free.

Firework

Never thought we can make firework with Javascript and html5.

Canvas Photo

Create polaroid photo effect with HTML5 canvas. It also come with the export tool.

Video showcase from Apple

Apple has a sweet demonstration of video masking, scaling and changing perspective of the video.

Photo Gallery

Another awesome demonstration. You can change the layout of the photo gallery and it has a nice blur effect.

Particle Animation

Using 300 sprites to spell out the word. It’s the demonstration of canvas particle animation.

Spread

Block based destruction of HTML5 Canvas Video

• jQuery Moving Tab and Sliding Content Tutorial | Demo
  
  Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.
• Learn How to Use Cookie with Javascript | Demo
  
  Cookie is very useful to remember selected menu item and other data. Learn how to manipulate cookie with javascript. A simple implementation of menu with cookie support is uncluded in this article and also functions that will make your life easier.
• jQuery Flipping Menu Tutorial using backgroundPosition Plugin | Demo
  
  Learn how to create a simple, but elegant menu by animating background with jquery backgroundPosition plugin. It’s simple, but the effect is really good.
• Clean and Attractive jQuery Vertical Menu Tutorial | Demo
  
  Check out this jQuery Vertical Menu. It uses jQuery Animate and Easing to create a simple and attractive lava effect.
• A Simple and Beautiful jQuery Accordion Tutorial | Demo
  
  Learn how to create the well-known javascript accordion with the most minimal amount of html, CSS, javascript code and of course, with a beautiful interface as well.
• Create a Good Looking Floating Menu with jQuery Easing | Demo
  
  This tutorial will show you how to create a horizontal menu with floating effect by using jquery.easing and jquery animate function. It’s a simple effect but the final product is quite nice looking and elegant.
• Create a Thumbnail with Fading Caption Using jQuery | Demo
  
  This tutorial will show you how to create a fading caption for your thmbnail gallery. It uses jQuery framework and CSS to create this transparent and fading effect.
• Create a Simple Infinite Carousel with jQuery | Demo
  
  This tutorial will show you how to create a infinite carousel script with jQuery. It also have a simple autorotate script that will rotate items in the carousel.
• jQuery Drop Down Menu for RSS Subscription Tutorial | Demo
  
  Learn how to create a simple drop down list with animation effect in this tutorial. This drop down menu can be easily skin and customize.
• Easy to Style jQuery Drop Down Menu Tutorial | Demo
  
  Drop down menu is always the most famous solution in navigation menu. This tutorial will show us how to create one and also to keep it as simple as possible so that it can be styled easily.
• Create a Vertical Sliding Bar Thumbnail Effect with jQuery | Demo
  
  A revisit from my previous famous tutorial, I have changed the transition to something different. 4 bars will be sliding up and down and reveal the description of the thumbanil hidden underneath.
• jQuery Photo Slide Show with Slick Caption Tutorial Revisited | Demo
  
  A revisit from my previous famous Image slide show with semi-transparent caption jQuery tutorial. I have fixed bugs and enhanced this image slide show to be more efficient, w3c compliant and more semantic. Quick! Learn how to create a slide show with cool sliding caption effect using jQuery.
• Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3 | Demo
  
  This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. It uses CSS3 to style everything and it looks really nice!
• Create a Fast and Simple Toggle View Content with jQuery | Demo
  
  This script is fairly straight forward. What it does is using the UL list and allow user to toggle to display the content of LI items. This is a really useful user interface feature that it helps designers to save space and build a less complicated user interface.
• Easiest Javascript Sliding Door Effect Tutorial with jQuery | Demo
  
  This is my fouth tutorial about thumbnail effect. This time is the well known sliding door effect that slide the top layer to top, bottom, left or right direction to reveal the content underneath.
• Useful and Practical jQuery Image ToolTips Tutorial | Demo
  
  In this tutorial, we will learn how to create a thumbnail image tooltip with jQuery. It displays a tooltip image when user hover on the thumbnail with fadein and out effect. it’s a useful script for your website.
• Create Background Scrolling Effect with jQuery | Demo
  
  In this tutorial, we’re not only go through how to make it, we will have it in plugin as well which allow user to customize the speed of the movement and direction (vertically, horizontally and diagonally).
• Create a Custom jQuery Image Gallery with jCarousel | Demo
  
  Alright fellow web designers and developers. We are going to do something a little bit more hardcore this time. There are heaps of jQuery plugins out there, but it’s hard to find something that suit us. So, this tutorial will teach you how to be creative and create a customize plugin.
• Create a Simple Interactive CSS Button with jQuery | Demo
  
  Alright, in this tutorial we will be creating a button that will replace the default submit button. It will be degrade gracefully, animated and easy to implement.
• Simplest jQuery jQuery Spotlight Effect Tutorial | Demo
  
  This tutorial will guide you how to build a spotlight effect with caption. I have seen someone use this technique before, I think that’s cool, so I decided to spice thing up a little bit by adding a caption into it.
• Create a Custom Content Slider with jQuery | Demo
  
  In this tutorial, we are going to create a custom content slider. The concept behind it is pretty simple, when you click on a button, it uses jQuery scroll-To plugin to scoll the content and display the right content.

• Navigation List Menu with Nudging Effect
  
• Vertical Scroll Menu | Demo
  
• Menu with Fadein and Fadeout Effect | Demo
  
• Simple Lava Lamp Menu | Demo
  
• Horizontal Tooltips Menu | Demo
  

Photo Gallery/Thumbnail Gallery

• Image Slide Show with Semi-Transparent Caption | Demo
  
• Image Gallery/News Slider with Caption | Demo
  
• Thumbnail Gallery with Slick Heading and Caption Effect | Demo
  
• Thumbnail with Zooming and Fading Caption Effect | Demo
  
• Four Corners Sliding Door Effect | Demo
  

Tooltips

• Simple CSS + Javascript Tooltip | Demo
  
• Custom Digg Post Sharing Tool | Demo
  

Dock

• Dock Content Tutorial – Dock at Top | Demo
  
• Dock Content Tutorial – Dock at Bottom | Demo
  

Modal Window

• Custom jQuery Modal Window Tutorial | Demo
  

Content Slider

• Create a Vertical, Horizontal and Diagonal Sliding Content Website | Demo
  
• jQuery Tabbed Interface | Demo
  
• jQuery Sliding Tab Menu | Demo
  

jQuery Plugin

• A Really Simple jQuery Plugin Tutorial | Demo
  

AJAX

• Create a Ajax based Form Submission | Demo
  
• A Simple AJAX Driven Website | Demo
  

Tunnelers

纯 JavaScript + HTML5 Canvas 生成的交互动画，难以置信。

The Mesmerizer

在格子中移动鼠标，颜色随着改变并扩散到周围的格子，很迷幻。用鼠标点四角的格子，或按键盘，可以看到更奇妙的效果。

Burn

在页面上移动鼠标，或按下鼠标，这样的效果，很难相信是浏览器原生的。

Cheloniidae Live

也是基于纯粹的 JavaScript，不过使用了一个 JavaScript 库。很有趣，你可以通过修改其 JavaScript 代码实现自己的效果（可惜被墙了）。

Canvas 3D engine

一个基于 Canvas 的 3D 引擎。目前只支持预设的图形，纹理及基本交互功能。

Bomomo

很值得一试。

DDD

这个交互动画也很有趣。

Plasma Tree

非常阿凡达。

本文来源： queness.com 8 Simply Amazing HTML5 Canvas and Javascript Animations

效果演示