本文主要包含HTML5，自定义元素，焦点图动画等相关知识,匿名希望在学习及工作中可以帮助到您
这是一款基于HTML5的焦点图动画，它和其他焦点图不同的地方在于，它播放的不仅仅是图片，而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。
在线演示源码下载
HTML代码
<p class="parallax-bg" id="slider-wrap">
<p class="slider parallax-bg" id="slider">
<p class="slider-sections sandbox">
<section class="first">
<img alt="Kendo UI" src="images/home-banner-1.png"/>
<p class="text">
<h2>SmartSite Ver 2.2<br />智能网站管理系统 </h2>
<p class="copy">采用前后台完全分离技术，通过标签（支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等）加模板技术.全站生成纯静态页。</p>
<p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a>
<a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
</p>
</section>
<section>
<img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />
<p class="text" style="padding-top: 10px;">
<h2>企业网站管理系统</h2>
<p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城，在线支付、配送、支付方式管理、广告等模块。</p>
<p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a>
<a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
</p>
</section>
<section>
<img src="images/home_banner_web-q2.png" alt="Kendo UI" />
<p class="text">
<h2>智能移动网站管理系统</h2>
<p class="copy">基于jquery.Mobile、HTML5技术框架，前后台完全分离，采用标签加模板技术，全站生成纯静态页。</p>
<p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a>
<a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
</p>
</section>
</p>
</p>
<a class="slider-prev" href="javascript: void(0)">?</a> <a class="slider-next" href="javascript: void(0)">?</a>
</p>CSS代码：
这里列出的是这个焦点图相关的核心CSS代码。
.slider section {display: none;}
.slider section.first {display: block;}
.slider-sections, .slider-sections section {width: 861px; height: 335px;}
.slider-sections {margin: 0 auto; position: relative;}
.slider-sections section {position: absolute; top: 0; left: 0px; }
.header-content h2
{
font:400 32px/1.2 "microsoft yahei", Tahoma, arial, sans-serif;
color: #fff;
margin: 0 0 26px;
}
.header-content p
{
margin: 0 0 30px;
}
.header-content .centered-content
{
padding-top: 30px;
padding-bottom: 10px;
}
.button {
float: left;
width: auto !important;
list-style: none;
}
.button a,
.button button,
.button input { /* Standard black button */
font-size: 15px;
/*font-family: 'lucida sans',arial,helvetica,sans-serif;*/
line-height: 18px;
color: #fff !important;
text-decoration: none;
padding: 5px 14px 6px 13px;
display: block;
width: auto;
position: relative;
z-index: 2;
border: none;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
background: #313131; /* Old browsers */
background: -moz-linear-gradient(top, #313131 0%, #222222 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #313131 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #313131 0%,#222222 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #313131 0%,#222222 100%); /* IE10+ */
background: linear-gradient(top, #313131 0%,#222222 100%); /* W3C */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.button a:hover,
.button input:hover,
.button button:hover,
.button a:focus,
.button input:focus,
.button button:focus
{
background: #464646; /* Old browsers */
background: -moz-linear-gradient(top, #464646 0%, #393939 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #464646 0%,#393939 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #464646 0%,#393939 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #464646 0%,#393939 100%); /* IE10+ */
background: linear-gradient(top, #464646 0%,#393939 100%); /* W3C */
}
header .header-content .button a,
#content .button a:hover
{
text-decoration: none;
}
.header-content .beta-ribbons {
position: absolute;
height: 120px;
width: 85px;
text-indent: -200px;
overflow: hidden;
background: url(../images/kendo-ribbons.png) no-repeat 0 0;
}
.header-content .beta-ribbons.ribbon-1 {
background-position: -170px 0;
top: -3px;
right: -145px;
}
.header-content p.copy .beta-ribbons.ribbon-1 {
top: -135px;
left: 900px;
}
.header-content .beta-ribbons.ribbon-4 {
background-position: -255px 0;
left: -62px;
top: -30px;
z-index: 10;
text-indent: -2000px;
}JavaScript代码：
下面是这个焦点图插件的代码。
/**
* @author Alexander Farkas
* v. 1.22
*/
(function ($)
{
if (!document.defaultView || !document.defaultView.getComputedStyle)
{ // IE6-IE8
var oldCurCSS = $.curCSS;
$.curCSS = function (elem, name, force)
{
if (name === 'background-position')
{
name = 'backgroundPosition';
}
if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name])
{
return oldCurCSS.apply(this, arguments);
}
var style = elem.style;
if (!force && style && style[name])
{
return style[name];
}
return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
};
}
var oldAnim = $.fn.animate;
$.fn.animate = function (prop)
{
if ('background-position' in prop)
{
prop.backgroundPosition = prop['background-