以下是 jQuery Sequence滑动块效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Sequence Theme Demo - Sliding Horizontal Parallax</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../demo-assets/css/demo-styles.css">
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="screen" href="../../demo-assets/css/demo-styles-ie.css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs-theme.sliding-horizontal-parallax.css">
<link href="http://fonts.googleapis.com/css?family=Play:400,700" rel="stylesheet" type="text/css">
<script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script src="https://apis.google.com/_/apps-static/_/js/gapi/gcm_ppb,googleapis_client,plusone/rt=j/ver=aL8ra67NaLs.zh_CN./sv=1/am=!wJ3zzZyr7MyIPjLesA/d=1/cb=gapi.loaded0" async=""></script><script async="" src="https://apis.google.com/_/apps-static/_/js/gapi/gcm_ppb,googleapis_client,plusone/rt=j/ver=aL8ra67NaLs.zh_CN./sv=1/am=!wJ3zzZyr7MyIPjLesA/d=1/cb=gapi.loaded0"></script><script gapi_processed="true" src="https://apis.google.com/js/plusone.js" async="" type="text/javascript"></script><script src="//platform.twitter.com/widgets.js" id="twitter-wjs"></script><script src="http://www.google-analytics.com/ga.js" async="" type="text/javascript"></script><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src=scripts/jquery.js type='text/javascript'%3E%3C/script%3E"));
}
</script><script type="text/javascript" src="scripts/jquery.js"></script><script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/sequence.jquery-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var options = {
autoPlay: false,
nextButton: ".next",
prevButton: ".prev",
preloader: "#sequence-preloader",
prependPreloader: false,
prependPreloadingComplete: "#sequence-preloader, #slideshow",
prependNextButton: false,
prependPrevButton: false,
pauseIcon: false,
animateStartingFrameIn: false,
delayDuringOutInTransitions: false,
afterPreload: function(){
$(".prev, .next").fadeIn(500);
if(!slideShow.transitionsSupported){
$("#slideshow").animate({"opacity": "1"}, 1000);
}
}
};
var slideShow = $("#slideshow").sequence(options).data("sequence");
if(!slideShow.transitionsSupported || slideShow.prefix == "-o-"){
$("#slideshow").animate({"opacity": "1"}, 1000);
slideShow.preloaderFallback();
}
})
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11991680-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!--code for the demo overlay and details, not needed for the demo to work-->
<!--//code for the demo overlay and details, not needed for the demo to work-->
<div id="header">
<div class="preloading-complete" id="slideshow">
<img style="display: inline;" class="prev" src="images/bt-prev.png" alt="Previous">
<img style="display: inline;" class="next" src="images/bt-next.png" alt="Next">
<ul style="width: 100%; height: 100%;">
<li class="current">
<div style="" class="info animate-in">
<h2>Built using Sequence.js</h2>
<p>The jQuery Slider Plugin with Infinite Style</p>
</div>
<img style="" class="sky animate-in" src="images/bg-clouds.png" alt="Blue Sky">
<img style="" class="balloon animate-in" src="images/balloon.png" alt="Balloon">
</li>
<li class="">
<div style="-moz-transition-duration: 4s; -moz-transition-delay: 0s;" class="info">
<h2>Creative Control</h2>
<p>Create unique sliders using CSS3 transitions -- no jQuery knowledge required!</p>
</div>
<img style="-moz-transition-duration: 4s; -moz-transition-delay: 0s;" class="sky" src="images/bg-clouds.png" alt="Blue Sky">
<img style="-moz-transition-duration: 4s; -moz-transition-delay: 0s;" class="aeroplane" src="images/aeroplane.png" alt="Aeroplane">
</li>
<li class="current">
<div style="" class="info">
<h2>Cutting Edge</h2>
<p>Supports modern browsers, old browsers (IE7+), touch devices and responsive designs</p>
</div>
<img style="" class="sky" src="images/bg-clouds.png" alt="Blue Sky">
<img style="" class="kite" src="images/kite.png" alt="Kite">
</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body></html>
JS代码(sequence.jquery-min.js):
/*Sequence.js (www.sequencejs.com)Version:0.5 BetaAuthor:Ian Lunn @IanLunnAuthor URL:http://www.ianlunn.co.uk/Github:https://github.com/IanLunn/SequenceThis is a FREE script and is dual licensed under the following:http://www.opensource.org/licenses/mit-license.php | http://www.gnu.org/licenses/gpl.htmlSequence.js and its dependencies are (c) Ian Lunn Design 2012 unless otherwise stated.Aside from these comments,you may modify and distribute this file as you please. Have fun!*/
(function(a){
function b(b,c,d,e){
function j(){
a(f.settings.preloader).remove();
f.settings.nextButton=f.init.uiElements(f.settings.prependNextButton,c.nextButton,d.nextButton,f.settings.nextButtonSrc,f.settings.nextButtonAlt);
f.settings.prevButton=f.init.uiElements(f.settings.prependPrevButton,c.prevButton,d.prevButton,f.settings.prevButtonSrc,f.settings.prevButtonAlt);
c.nextButton!=0&&f.settings.showNextButtonOnInit&&f.settings.nextButton.show();
c.prevButton!=0&&f.settings.showPrevButtonOnInit&&f.settings.prevButton.show();
if(f.settings.pauseIcon!=0){
f.settings.pauseIcon=f.init.uiElements(f.settings.prependPauseIcon,c.pauseIcon,".pause-icon",f.settings.pauseIconSrc);
f.settings.pauseIcon!=undefined&&f.settings.pauseIcon.hide()}
f.hasTouch&&(f.settings.calculatedSwipeThreshold=f.container.width()*(f.settings.swipeThreshold/100));
f.currentFrame=f.sequence.children("li:nth-child("+f.settings.startingFrameID+")").addClass("current");
f.currentFrameChildren=f.currentFrame.children();
f.currentFrameID=f.settings.startingFrameID;
f.nextFrameID=f.currentFrameID;
f.sequence.children("li").children().removeClass("animate-in");
f.direction;
f.sequence.css({
width:"100%",height:"100%"}
);
if(f.transitionsSupported){
whenFirstAnimateInEnds=function(){
animationComplete=function(){
f.settings.afterNextFrameAnimatesIn();
f.active=!1;
if(f.settings.autoPlay){
autoPlaySequence=function(){
f.autoPlaySequence()}
;
clearTimeout(f.sequenceTimer);
f.sequenceTimer=setTimeout(autoPlaySequence,f.settings.autoPlayDelay,f)}
}
;
f.waitForAnimationsToComplete(f.currentFrameChildren,animationComplete)}
;
if(!f.settings.animateStartingFrameIn){
f.modifyElements(f.currentFrameChildren,"0s");
f.currentFrameChildren.addClass("animate-in");
setTimeout(function(){
f.modifyElements(f.currentFrameChildren,"")}
,100);
if(f.settings.autoPlay){
autoPlaySequence=function(){
f.autoPlaySequence()}
;
clearTimeout(f.sequenceTimer);
f.sequenceTimer=setTimeout(autoPlaySequence,f.settings.autoPlayDelay,f)}
}
else if(f.settings.reverseAnimationsWhenNavigatingBackwards&&f.settings.autoPlayDirection-1&&f.settings.animateStartingFrameIn){
f.active=!0;
f.modifyElements(f.currentFrameChildren,"0s");
f.currentFrameChildren.addClass("animate-out");
f.settings.beforeNextFrameAnimatesIn();
setTimeout(function(){
f.modifyElements(f.currentFrameChildren,"");
f.currentFrameChildren.removeClass("animate-out");
f.currentFrameChildren.addClass("animate-in")}
,100);
whenFirstAnimateInEnds()}
else{
f.active=!0;
f.settings.beforeCurrentFrameAnimatesIn();
setTimeout(function(){
f.modifyElements(f.currentFrameChildren,"");
f.currentFrameChildren.addClass("animate-in")}
,100);
whenFirstAnimateInEnds()}
}
else{
f.sequence.children("li").children().css("opacity","0").addClass("animate-in").animate({
opacity:"1"}
,500);
f.currentFrame.css("z-index",f.numberOfFrames);
f.sequence.children(":not(li:nth-child("+f.settings.startingFrameID+"))").css({
display:"none",opacity:0}
);
if(f.settings.autoPlay){
autoPlaySequence=function(){
f.autoPlaySequence()}
;
clearTimeout(f.sequenceTimer);
f.sequenceTimer=setTimeout(autoPlaySequence,f.settings.autoPlayDelay,f)}
}
f.settings.nextButton!=undefined&&f.settings.nextButton.click(function(){
f.next()}
);
f.settings.prevButton!=undefined&&f.settings.prevButton.click(function(){
f.prev()}
);
f.settings.keysNavigate==1&&a(document).keydown(function(a){
a.keyCode==39&&f.next();
a.keyCode==37&&f.prev()}
);
if(f.settings.pauseOnHover&&!f.settings.pauseOnElementsOutsideContainer&&f.settings.autoPlay){
function b(b){
containerLeft=f.container.position().left;
containerRight=f.container.position().left+f.container.width();
containerTop=f.container.position().top;
containerBottom=f.container.position().top+f.container.height();
pageX=b.pageX;
pageY=b.pageY;
if(pageX>=containerLeft&&pageX<=containerRight&&pageY>=containerTop&&pageY<=containerBottom){
f.settings.autoPlay=!1;
clearTimeout(f.sequenceTimer);
a(f.settings.pauseIcon).show();
f.sequence.unbind("mousemove")}
}
f.hoverEvent=f.sequence.mousemove(function(a){
b(a)}
);
f.sequence.mouseleave(function(c){
f.settings.autoPlay=!0;
autoPlaySequence=function(){
f.autoPlaySequence()}
;
clearTimeout(f.sequenceTimer);
f.sequenceTimer=setTimeout(autoPlaySequence,f.settings.autoPlayDelay,f);
a(f.settings.pauseIcon).hide();
f.sequence.data("events").mousemove==undefined&&f.sequence.mousemove(function(a){
b(a)}
)}
)}
else f.settings.pauseOnHover&&f.settings.autoPlay&&(f.hoverEvent=f.sequence.hover(function(b){
f.settings.autoPlay=!1;
clearTimeout(f.sequenceTimer);
a(f.settings.pauseIcon).show()}
,function(){
f.settings.autoPlay=!0;
autoPlaySequence=function(){
f.autoPlaySequence()}
;
clearTimeout(f.sequenceTimer);
f.sequenceTimer=setTimeout(autoPlaySequence,f.settings.autoPlayDelay,f);
a(f.settings.pauseIcon).hide()}
));
if(f.settings.touchEnabled&&f.hasTouch){
var e,g={
touchstart:-1,touchmove:-1,swipeDirection:""}
;
f.sequence.bind("touchstart touchmove touchend",function(a){
a.preventDefault();
switch(a.originalEvent.type){
case"touchstart":case"touchmove":g[a.originalEvent.type]=a.originalEvent.touches[0].pageX;
break;
case"touchend":g.touchstart>-1&&g.touchmove>f.settings.calculatedSwipeThreshold&&(g.touchstart<g.touchmove?f.next():f.prev());
default:}
}
)}
a(window).resize(function(){
f.settings.calculatedSwipeThreshold=f.container.width()*(f.settings.swipeThreshold/100)}
)}
var f=this;
f.container=a(b),f.sequence=f.container.children("ul");
try{
Modernizr.prefixed;
if(Modernizr.prefixed==undefined)throw"undefined"}
catch(g){
e.modernizr()}
var h={
WebkitTransition:"-webkit-",MozTransition:"-moz-",OTransition:"-o-",msTransition:"-ms-",transition:""}
,i={
WebkitTransition:"webkitTransitionEnd webkitAnimationEnd",MozTransition:"transitionend animationend",OTransition:"oTransitionEnd oAnimationEnd",msTransition:"MSTransitionEnd MSAnimationEnd",transition:"transitionend animationend"}
;
f.prefix=h[Modernizr.prefixed("transition")],f.transitionEnd=i[Modernizr.prefixed("transition")],f.transitionProperties={
}
,f.numberOfFrames=f.sequence.children("li").length,f.transitionsSupported=f.prefix!=undefined?!0:!1,f.hasTouch="ontouchstart"in window?!0:!1,f.sequenceTimer,f.paused=!1,f.hoverEvent,f.defaultPreloader,f.init={
preloader:function(b){
prependTo=f.settings.prependPreloader==1?f.container:f.settings.prependPreloader;
switch(b){
case!0:case undefined:e.defaultPreloader(prependTo,f.transitionsSupported,f.prefix);
(!f.transitionsSupported||f.prefix=="-o-")&&f.preloaderFallback();
return a("#sequence-preloader");
case!1:break;
default:this.CSSSelectorToHTML(b);
return a(b)}
}
,uiElements:function(b,c,d,e,g){
prependElement=b==1?f.container:b;
switch(c){
case!0:case undefined:a(prependElement).prepend("<img "+this.CSSSelectorToHTML(d)+'src="'+e+'" alt="'+g+'" />');
return a(d);
case!1:break;
default:a(prependElement).prepend("<img "+this.CSSSelectorToHTML(c)+'src="'+e+'" alt="'+g+'" />');
return a(c)}
}
,CSSSelectorToHTML:function(a){
switch(a.charAt(0)){
case".":return'class="'+a.split(".")[1]+'"';
case"#":return'id="'+a.split("#")[1]+'"';
default:return a}
}
}
,f.settings=a.extend({
}
,d,c),f.settings.preloader=f.init.preloader(f.settings.preloader);
if(f.settings.animateStartingFrameIn){
f.modifyElements(f.sequence.children("li").children(),"0s");
f.sequence.children("li").children().removeClass("animate-in")}
f.settings.preloader?a(window).bind("load",function(){
f.settings.afterPreload();
if(f.settings.hidePreloaderUsingCSS&&f.transitionsSupported&&f.prefix!="-o-"){
prependPreloadingCompleteTo=f.settings.prependPreloadingComplete==1?f.settings.preloader:a(f.settings.prependPreloadingComplete);
prependPreloadingCompleteTo.addClass("preloading-complete");
setTimeout(j,f.settings.hidePreloaderDelay)}
else f.settings.preloader.fadeOut(f.settings.hidePreloaderDelay,function(){
clearInterval(f.defaultPreloader);
j()}
);
a(window).unbind("load")}
):j()}
b.prototype={
preloaderFallback:function(){
function b(){
i=i==1?0:1;
a("#sequence-preloader img:nth-child(1)").animate({
opacity:i}
,100);
a("#sequence-preloader img:nth-child(2)").animate({
opacity:i}
,350);
a("#sequence-preloader img:nth-child(3)").animate({
opacity:i}
,600)}
i=0;
b();
self.defaultPreloader=setInterval(function(){
b()}
,600)}
,autoPlaySequence:function(a){
var b=this;
b.settings.autoPlayDirection==1?b.next():b.prev()}
,modifyElements:function(a,b){
var c=this;
a.css(c.prefixCSS(c.prefix,{
"transition-duration":b,"transition-delay":b}
))}
,prefixCSS:function(a,b){
css={
}
;
for(property in b)css[a+property]=b[property];
return css}
,getStyleBySelector:function(a){
css={
}
;
var b=document.styleSheets,c,d,e;
for(d=b.length-1;
d>=0;
d--){
error=!1;
try{
c=b[d].cssRules}
catch(f){
error=!0}
if(!error)for(e=0;
e<c.length;
e++)if(c[e].type==CSSRule.STYLE_RULE&&c[e].selectorText==a){
css["-o-transition-duration"]=c[e].style.OTransitionDuration;
css["-o-transition-delay"]=c[e].style.OTransitionDelay;
return css}
}
return null}
,startAutoPlay:function(b,c){
var d=this;
b=b==undefined?0:b;
d.settings.autoPlayDelay=c==undefined?d.settings.autoPlayDelay:c;
d.settings.autoPlay=!0;
autoPlaySequence=function(){
d.autoPlaySequence()}
;
clearTimeout(d.sequenceTimer);
d.sequenceTimer=setTimeout(autoPlaySequence,d.settings.autoPlayDelay,d);
d.settings.pauseOnHover&&(d.hoverEvent=d.sequence.hover(function(){
d.settings.autoPlay=!1;
clearTimeout(d.sequenceTimer);
a(d.settings.pauseIcon).show()}
,function(){
d.settings.autoPlay=!0;
autoPlaySequence=function(){
d.autoPlaySequence()}
;
clearTimeout(d.sequenceTimer);
d.sequenceTimer=setTimeout(autoPlaySequence,d.settings.autoPlayDelay,d);
a(d.settings.pauseIcon).hide()}
))}
,stopAutoPlay:function(){
var a=this;
a.settings.autoPlay=!1;
clearTimeout(a.sequenceTimer);
a.hoverEvent!=undefined&&a.hoverEvent.unbind()}
,next:function(){
var a=this;
if(!a.active)if(a.settings.cycle||!a.settings.cycle&&a.currentFrame.index()+1!=a.numberOfFrames){
if(a.paused){
a.paused=!1;
a.startAutoPlay()}
a.nextFrameID=a.currentFrame.index()+1!=a.numberOfFrames?a.currentFrameID+1:1;
a.goTo(a.nextFrameID,1)}
else if(a.settings.autoPlayDirection==1){
a.paused=!0;
a.stopAutoPlay()}
}
,prev:function(){
var a=this;
if(!a.active)if(a.settings.cycle||!a.settings.cycle&&a.currentFrame.index()+1!=1){
if(a.paused){
a.paused=!1;
a.startAutoPlay()}
a.nextFrameID=a.currentFrame.index()+1==1?a.numberOfFrames:a.currentFrameID-1;
a.goTo(a.nextFrameID,-1)}
else if(a.settings.autoPlayDirection==-1){
a.paused=!0;
a.stopAutoPlay()}
}
,goTo:function(a,b){
var c=this;
a==c.numberOfFrames?c.settings.beforeLastFrameAnimatesIn():a==1&&c.settings.beforeFirstFrameAnimatesIn();
if(a==c.currentFrame.index()+1)return!1;
if(!c.active){
c.active=!0;
c.currentFrame=c.sequence.children(".current");
nextFrame=c.sequence.children("li:nth-child("+a+")");
b==undefined?c.direction=a>c.currentFrameID?1:-1:c.direction=b;
frameChildren=c.currentFrame.children();
nextFrameChildren=nextFrame.children();
if(c.transitionsSupported){
c.settings.beforeCurrentFrameAnimatesOut();
c.animateOut(c.direction);
animateIn=function(){
c.animateIn(c.direction);
c.currentFrameID=a}
;
switch(c.settings.delayDuringOutInTransitions){
case!0:c.waitForAnimationsToComplete(frameChildren,animateIn);
break;
case!1:animateIn();
break;
default:setTimeout(animateIn,c.settings.delayDuringOutInTransitions)}
}
else{
c.sequence.children("li").css({
position:"relative"}
);
c.currentFrame.animate({
opacity:0}
,c.settings.fallbackTheme.speed,function(){
c.currentFrame.css({
display:"none","z-index":"1"}
);
c.currentFrame.removeClass("current");
c.settings.beforeNextFrameAnimatesIn();
nextFrame.addClass("current").css({
display:"block","z-index":c.numberOfFrames}
).animate({
opacity:1}
,500);
c.currentFrame=nextFrame;
c.currentFrameID=c.currentFrame.index()+1;
c.active=!1;
if(c.settings.autoPlay){
autoPlaySequence=function(){
c.autoPlaySequence()}
;
clearTimeout(c.sequenceTimer);
c.sequenceTimer=setTimeout(autoPlaySequence,c.settings.autoPlayDelay,c)}
}
)}
}
}
,animateOut:function(b){
var c=this;
c.settings.beforeCurrentFrameAnimatesIn();
if(!c.settings.reverseAnimationsWhenNavigatingBackwards||b==1){
c.modifyElements(nextFrameChildren,"0s");
nextFrameChildren.removeClass("animate-out");
c.modifyElements(frameChildren,"");
c.settings.disableAnimateOut||frameChildren.addClass("animate-out").removeClass("animate-in")}
if(c.settings.reverseAnimationsWhenNavigatingBackwards&&b==-1){
c.modifyElements(nextFrameChildren,"0s");
c.settings.disableAnimateOut?c.active=!1:nextFrameChildren.addClass("animate-out");
c.modifyElements(frameChildren,"");
frameChildren.each(function(){
if(c.prefix=="-o-"){
selector="."+a(this).attr("class").replace(" ",".");
previousFrameTransitionProperties=c.getStyleBySelector(selector);
c.transitionProperties["transition-duration"]=previousFrameTransitionProperties["-o-transition-duration"];
c.transitionProperties["transition-delay"]=previousFrameTransitionProperties["-o-transition-delay"];
c.transitionProperties["transition-delay"]=c.transitionProperties["transition-delay"]==""?"0s":c.transitionProperties["transition-delay"]}
else{
c.transitionProperties["transition-duration"]=a(this).css(c.prefix+"transition-duration");
c.transitionProperties["transition-delay"]=a(this).css(c.prefix+"transition-delay")}
a(this).css(c.prefixCSS(c.prefix,c.transitionProperties)).removeClass("animate-in")}
)}
}
,waitForAnimationsToComplete:function(b,c){
var d=this;
elementsAnimated={
}
;
b.each(function(){
elementsAnimated[a(this).attr("class")]=!1}
);
d.currentFrame.bind(d.transitionEnd,function(a){
elementsAnimated[a.target.className]=!0;
total=0;
for(element in elementsAnimated)elementsAnimated[element]==1&&total++;
total==b.length&&c()}
)}
,animateIn:function(a){
var b=this;
b.currentFrame.removeClass("current");
b.currentFrame.unbind(b.transitionEnd);
nextFrame.addClass("current");
b.currentFrame=nextFrame;
a==1?b.currentFrameID=b.currentFrameID!=b.numberOfFrames?b.currentFrameID+1:1:b.currentFrameID=b.currentFrameID!=1?b.currentFrameID-1:b.numberOfFrames;
nextFrameChildren=nextFrame.children();
frameChildren=b.currentFrame.children();
b.settings.beforeNextFrameAnimatesIn();
if(!b.settings.reverseAnimationsWhenNavigatingBackwards||a==1){
b.modifyElements(nextFrameChildren,"0s");
nextFrameChildren.removeClass("animate-out");
setTimeout(function(){
frameChildren.removeClass("animate-out");
b.modifyElements(frameChildren,"");
frameChildren.addClass("animate-in");
whenAnimationEnds()}
,50)}
b.settings.reverseAnimationsWhenNavigatingBackwards&&a==-1&&setTimeout(function(){
b.modifyElements(frameChildren,"");
frameChildren.addClass("animate-in").removeClass("animate-out");
whenAnimationEnds()}
,50);
whenAnimationEnds=function(){
unbind=function(){
b.settings.afterNextFrameAnimatesIn();
b.currentFrameID==b.numberOfFrames?b.settings.afterLastFrameAnimatesIn():b.currentFrameID==1&&b.settings.afterFirstFrameAnimatesIn();
b.currentFrame.unbind(b.transitionEnd);
b.active=!1;
if(b.settings.autoPlay){
autoPlaySequence=function(){
b.autoPlaySequence()}
;
clearTimeout(b.sequenceTimer);
b.sequenceTimer=setTimeout(autoPlaySequence,b.settings.autoPlayDelay,b)}
}
;
b.waitForAnimationsToComplete(nextFrameChildren,unbind)}
}
}
;
a.fn.sequence=function(e){
return this.each(function(){
var f=new b(a(this),e,d,c);
a(this).data("sequence",f)}
)}
;
var c={
modernizr:function(){
window.Modernizr=function(a,b,c){
function d(a){
p.cssText=a}
function e(a,b){
return d(prefixes.join(a+";
")+(b||""))}
function f(a,b){
return typeof a===b}
function g(a,b){
return!!~(""+a).indexOf(b)}
function h(a,b){
for(var d in a)if(p[a[d]]!==c)return b=="pfx"?a[d]:!0;
return!1}
function i(a,b,d){
for(var e in a){
var g=b[a[e]];
if(g!==c)return d===!1?a[e]:f(g,"function")?g.bind(d||b):g}
return!1}
function j(a,b,c){
var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+t.join(d+" ")+d).split(" ");
return f(b,"string")||f(b,"undefined")?h(e,b):(e=(a+" "+u.join(d+" ")+d).split(" "),i(e,b,c))}
var k="2.5.3",l={
}
,m=b.documentElement,n="modernizr",o=b.createElement(n),p=o.style,q,r={
}
.toString,s="Webkit Moz O ms",t=s.split(" "),u=s.toLowerCase().split(" "),v={
}
,w={
}
,x={
}
,y=[],z=y.slice,A,B={
}
.hasOwnProperty,C;
!f(B,"undefined")&&!f(B.call,"undefined")?C=function(a,b){
return B.call(a,b)}
:C=function(a,b){
return b in a&&f(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(a){
var b=self;
if(typeof b!="function")throw new TypeError;
var c=z.call(arguments,1),d=function(){
if(self instanceof d){
var e=function(){
}
;
e.prototype=b.prototype;
var f=new e,g=b.apply(f,c.concat(z.call(arguments)));
return Object(g)===g?g:f}
return b.apply(a,c.concat(z.call(arguments)))}
;
return d}
);
for(var D in v)C(v,D)&&(A=D.toLowerCase(),l[A]=v[D](),y.push((l[A]?"":"no-")+A));
return d(""),o=q=null,l._version=k,l._domPrefixes=u,l._cssomPrefixes=t,l.testProp=function(a){
return h([a])}
,l.testAllProps=j,l.prefixed=function(a,b,c){
return b?j(a,b,c):j(a,"pfx")}
,l}
(self,self.document)}
,defaultPreloader:function(b,c,d){
opacity=c?0:1;
a("head").append("<style>#sequence-preloader{
height:100%;
position:absolute;
width:100%;
z-index:999999;
}
@"+d+"keyframes preload{
0%{
opacity:0;
}
50%{
opacity:1;
}
100%{
opacity:0;
}
}
#sequence-preloader img{
background:#ff9933;
border-radius:6px;
display:inline-block;
height:12px;
opacity:"+opacity+";
position:relative;
top:-50%;
width:12px;
"+d+"animation:preload 1s infinite;
animation:preload 1s infinite;
}
.preloading{
height:12px;
margin:0 auto;
top:50%;
position:relative;
width:48px;
}
#sequence-preloader img:nth-child(2){
"+d+"animation-delay:.15s;
animation-delay:.15s;
}
#sequence-preloader img:nth-child(3){
"+d+"animation-delay:.3s;
animation-delay:.3s;
}
.preloading-complete{
opacity:0;
visibility:hidden;
"+d+"transition-duration:1s;
transition-duration:1s;
}
</style>");
a(b).prepend('<div id="sequence-preloader"><div class="preloading"><img src="images/sequence-preloader.png" alt="Sequence is loading,please wait..." /> <img src="images/sequence-preloader.png" alt="Sequence is loading,please wait..." /> <img src="images/sequence-preloader.png" alt="Sequence is loading,please wait..." /></div></div>')}
}
,d={
nextButton:".next",prependNextButton:!0,nextButtonSrc:"images/bt-next.png",nextButtonAlt:"&#gt;
",showNextButtonOnInit:!0,prevButton:".prev",prependPrevButton:!0,prevButtonSrc:"images/bt-prev.png",prevButtonAlt:"&#lt;
",showPrevButtonOnInit:!0,preloader:!0,prependPreloader:!0,prependPreloadingComplete:!0,hidePreloaderUsingCSS:!0,hidePreloaderDelay:0,startingFrameID:1,autoPlay:!0,autoPlayDirection:1,animatestartingFrameIn:!1,autoPlayDelay:5e3,pauseOnHover:!0,pauseIcon:!1,prependPauseIcon:!0,pauseIconSrc:"images/pause-icon.png",pauseAlt:"Pause",keysNavigate:!0,delayDuringOutInTransitions:1e3,touchEnabled:!0,swipeThreshold:15,cycle:!0,disableAnimateOut:!1,reverseAnimationsWhenNavigatingBackwards:!0,pauseOnElementsOutsideContainer:!1,fallbackTheme:{
speed:500}
,beforeCurrentFrameAnimatesOut:function(){
}
,beforeNextFrameAnimatesIn:function(){
}
,afterNextFrameAnimatesIn:function(){
}
,beforeCurrentFrameAnimatesIn:function(){
}
,beforeFirstFrameAnimatesIn:function(){
}
,afterFirstFrameAnimatesIn:function(){
}
,beforeLastFrameAnimatesIn:function(){
}
,afterLastFrameAnimatesIn:function(){
}
,afterPreload:function(){
}
}
}
)(jQuery);
CSS代码(sequencejs-theme.sliding-horizontal-parallax.css):
/*Theme created for use with Sequence.js (http://www.sequencejs.com/)Theme:Sliding Horizontal ParallaxVersion:0.1 BetaTheme Author:Ian Lunn @IanLunnAuthor URL:http://www.ianlunn.co.uk/Theme URL:http://www.sequencejs.com/themes/sliding-horizontal-parallax/This is a FREE theme and is dual licensed under the following:http://www.opensource.org/licenses/mit-license.php | http://www.gnu.org/licenses/gpl.htmlSequence.js and its dependencies are (c) Ian Lunn Design 2012 unless otherwise stated.Aside from these comments,you may modify and distribute this file as you please. Have fun! */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body{background:url(../images/bg-sky.png) repeat-x #4da5e4;color:white;font-family:'Play',sans-serif;max-width:2560px;margin:0 auto;-ms-overflow-x:hidden;overflow-x:hidden;}
a{color:white;}
#header{height:750px;position:relative;margin:0 auto;min-width:960px;overflow:hidden;}
#slideshow{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;}
#sequence-preloader.preloading-complete{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;visibility:hidden;}
#slideshow.preloading-complete{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transition-duration:1s;-moz-transition-duration:1s;-o-transition-duration:1s;-ms-transition-duration:1s;transition-duration:1s;}
#sequence-preloader{background:none;height:100%;position:absolute;width:100%;z-index:999999;}
@keyframes "preload"{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-moz-keyframes preload{0%{filter:alpha(opacity=0);opacity:0;}
50%{filter:alpha(opacity=100);opacity:1;}
100%{filter:alpha(opacity=0);opacity:0;}
}
@-webkit-keyframes "preload"{0%{filter:alpha(opacity=0);opacity:0;}
50%{filter:alpha(opacity=100);opacity:1;}
100%{filter:alpha(opacity=0);opacity:0;}
}
@-ms-keyframes "preload"{0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@-o-keyframes "preload"{0%{filter:alpha(opacity=0);filter:alpha(opacity=0);opacity:0;}
50%{filter:alpha(opacity=100);filter:alpha(opacity=100);opacity:1;}
100%{filter:alpha(opacity=0);filter:alpha(opacity=0);opacity:0;}
}
#sequence-preloader img{background:#ff9933;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;display:inline-block;height:12px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;position:relative;top:-50%;width:12px;-webkit-animation:preload 1s infinite;-moz-animation:preload 1s infinite;-ms-animation:preload 1s infinite;animation:preload 1s infinite;}
.preloading{height:12px;margin:0 auto;top:50%;position:relative;width:48px;}
#sequence-preloader img:nth-child(2){-webkit-animation-delay:.15s;-moz-animation-delay:.15s;-ms-animation-delay:.15s;animation-delay:.15s;}
#sequence-preloader img:nth-child(3){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-ms-animation-delay:.3s;animation-delay:.3s;}
#main{border:none;margin:-100px auto 0 auto;position:relative;z-index:200;}
.next,.prev{color:white;cursor:pointer;display:none;font-size:80px;font-weight:bold;position:absolute;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";filter:alpha(opacity=40);opacity:0.4;top:280px;height:41px;width:39px;z-index:20;-webkit-transition-duration:.4s;-moz-transition-duration:.4s;-o-transition-duration:.4s;-ms-transition-duration:.4s;transition-duration:.4s;}
.prev{left:40px;position:absolute;}
.next{position:absolute;right:40px;}
.next:hover,.prev:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);-webkit-transition-duration:.4s;-moz-transition-duration:.4s;-o-transition-duration:.4s;-ms-transition-duration:.4s;transition-duration:.4s;}
#sequence-preloader{background:#278ace;}
#slideshow *{-webkit-backface-visibility:hidden;}
#slideshow li > *{position:absolute;}
#slideshow{height:600px;margin:0 auto;position:relative;max-width:1400px;}
h2{font-size:1.5em;line-height:1.2em;}
.info{color:black;font-size:1em;right:150%;line-height:1.2em;top:270px;width:25%;z-index:10;vertical-align:middle;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;}
.info.animate-in{right:15%;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;}
.info.animate-out{right:-150%;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;}
.balloon{left:-140%;top:200px;max-width:40%;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:6;}
.balloon.animate-in{left:15%;top:70px;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:4;}
.balloon.animate-out{left:140%;top:-30px;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:2;}
.aeroplane{left:-50%;max-width:40%;top:800px;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:6;}
.aeroplane.animate-in{left:10%;top:100px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-o-transform:rotate(20deg);-ms-transform:rotate(20deg);transform:rotate(20deg);-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top -webkit-transform;-moz-transition-property:left top -moz-transform;-o-transition-property:left top -o-transform;-ms-transition-property:left top -ms-transform;transition-property:left top transform;z-index:4;}
.aeroplane.animate-out{left:70%;top:-900px;-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-o-transform:rotate(40deg);-ms-transform:rotate(40deg);transform:rotate(40deg);-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top -webkit-transform;-moz-transition-property:left top -moz-transform;-o-transition-property:left top -o-transform;-ms-transition-property:left top -ms-transform;transition-property:left top transform;z-index:2;}
.sky{left:-6%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0;vertical-align:middle;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:1;}
.sky.animate-in{left:0%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;top:0px;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:1;}
.sky.animate-out{left:6%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;z-index:1;}
.kite{left:-30%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;max-width:40%;top:300px;-webkit-transition-property:left top;-moz-transition-property:left top;-o-transition-property:left top;-ms-transition-property:left top;transition-property:left top;-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;z-index:6;}
.kite.animate-in{left:-15%;top:300px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-webkit-transform:rotate(80deg);-moz-transform:rotate(80deg);-o-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transition-duration:4s;-moz-transition-duration:4s;-o-transition-duration:4s;-ms-transition-duration:4s;transition-duration:4s;-webkit-transition-property:left top -webkit-transform;-moz-transition-property:left top -moz-transform;-o-transition-property:left top -o-transform;-ms-transition-property:left top -ms-transform;transition-property:left top transform;z-index:4;}
.kite.animate-out{left:-15%;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:300px;-webkit-transform:rotate(200deg);-moz-transform:rotate(200deg);-o-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%;-webkit-transition-duration:3s;-moz-transition-duration:3s;-o-transition-duration:3s;-ms-transition-duration:3s;transition-duration:3s;-webkit-transition-property:left top -webkit-transform;-moz-transition-property:left top -moz-transform;-o-transition-property:left top -o-transform;-ms-transition-property:left top -ms-transform;transition-property:left top transform;z-index:2;}
分享到QQ
分享到微博
微信扫一扫
