以下是 jQuery幻灯片插件Skippr滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery幻灯片插件Skippr</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.skippr.css">
</head>
<body>
<div class="hero">
<div id="random">
<div class="yellow"></div>
<div style="background-image: url(img/test2.jpg)"></div>
<div style="background-image: url(img/test5.jpg)"></div>
<div style="background-image: url(img/test3.jpg)"></div>
<div style="background-image: url(img/test4.jpg)"></div>
</div>
<!-- <div id="random">
<img src="img/test3.jpg">
<img src="img/test4.jpg">
<img src="img/test1.jpg">
<img src="img/test5.jpg">
</div> -->
<div class="container">
<div class="tagline">
<h1>Skippr.</h1>
<p>A lighter, faster slideshow plugin for jQuery.
</div>
<div class="downloads">
<div class="btn-container">
<a href="#" target="_blank"><div class="btn">首页</div></a>
<a href="#" target="_blank"><div class="btn">站长之家</div></a>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.skippr.min.js"></script>
<script>
$(document).ready(function() {
$("#random").skippr();
});
</script>
</body>
</html>
JS代码(jquery.skippr.min.js):
(function(){
var e=function(){
function e(e,t){
var r=this;
r.settings=$.extend($.fn.skippr.defaults,t),r.$element=$(e),r.$parent=r.$element.parent(),r.$photos=r.$element.children(),r.count=r.$photos.length,r.countString=String(r.count),r.init()}
return e.prototype.init=function(){
var e=this;
e.setup(),e.navClick(),e.arrowClick(),1==e.settings.autoPlay&&(e.autoPlay(),e.autoPlayPause())}
,e.prototype.setup=function(){
var e=this;
if("img"==e.settings.childrenElementType){
var t=[];
for(i=0;
i<e.count;
i++){
var r=e.$photos.eq(i).attr("src"),a='<div style="background-image:url('+r+')"></div>';
t.push(a)}
t.join(""),e.$element.append(t),e.$element.find("img").remove(),e.$photos=e.$element.children()}
"fade"==e.settings.transition&&e.$photos.not(":first-child").hide(),"slide"==e.settings.transition&&e.setupSlider(),e.$photos.eq(0).addClass("visible"),e.$element.addClass("skippr"),e.navBuild(),1==e.settings.arrows&&e.arrowBuild()}
,e.prototype.arrowBuild=function(){
var e,t,r=this,a=r.count;
e='<nav class="skippr-arrow skippr-previous" data-slider="'+a+'"></nav>',t='<nav class="skippr-arrow skippr-next" data-slider="2"></nav>',r.$element.append(e+t)}
,e.prototype.arrowClick=function(){
var e=this;
$(".skippr-arrow").click(function(){
e.change($(this))}
)}
,e.prototype.navBuild=function(){
var e,t=this,r=[];
if("block"==t.settings.navType)var a="skippr-nav-element-block";
else if("bubble"==t.settings.navType)var a="skippr-nav-element-bubble";
for(var o=0;
o<t.count;
o++){
var n;
n=0==o?"<div class='skippr-nav-element "+a+" skippr-nav-element-active' data-slider='"+(o+1)+"'></div>":"<div class='skippr-nav-element "+a+"' data-slider='"+(o+1)+"'></div>",r.push(n)}
r=r.join(""),e='<nav class="skippr-nav-container">'+r+"</nav>",t.$element.append(e)}
,e.prototype.navClick=function(){
var e=this;
e.$element.find(".skippr-nav-element").click(function(){
e.change($(this))}
)}
,e.prototype.change=function(e){
{
var t=this,r=e.attr("data-slider"),a=$(".skippr-nav-element-active").attr("data-slider");
$(".skippr-next").attr("data-slider"),$(".skippr-previous").attr("data-slider")}
if(r!=a){
"fade"==t.settings.transition&&(t.$photos.eq(r-1).css("z-index","10").siblings("div").css("z-index","9"),t.$photos.eq(r-1).fadeIn(t.settings.speed,function(){
$(".visible").fadeOut("fast",function(){
$(this).removeClass("visible"),t.$photos.eq(r-1).addClass("visible")}
)}
)),"slide"==t.settings.transition&&t.$photos.each(function(){
var e,o=parseFloat($(this).css("left")),n=t.$parent.width();
r>a&&(e=o-n*(r-a)),a>r&&(e=o+n*(a-r)),$(this).velocity({
left:e+"px"}
,t.settings.speed,t.settings.easing)}
),$(".skippr-nav-element").eq(r-1).addClass("skippr-nav-element-active").siblings().removeClass("skippr-nav-element-active");
var o=Number(r)+1,n=Number(r)-1;
r==t.count?$(".skippr-next").attr("data-slider","1"):$(".skippr-next").attr("data-slider",o),1==r?$(".skippr-previous").attr("data-slider",t.countString):$(".skippr-previous").attr("data-slider",n)}
}
,e.prototype.autoPlay=function(){
var e=this;
timer=setInterval(function(){
var t=$(".skippr-nav-element-active"),r=t.attr("data-slider");
if(r==e.count)var a=$(".skippr-nav-element").eq(0);
else var a=t.next();
e.change(a)}
,e.settings.autoPlayDuration)}
,e.prototype.autoPlayPause=function(){
var e=this;
e.$parent.hover(function(){
clearInterval(timer)}
,function(){
e.autoPlay()}
)}
,e.prototype.setupSlider=function(){
var e,t=this,r=t.$parent.width();
for(t.$photos.css("position","absolute"),i=0;
i<t.count;
i++)e=r*i,t.$photos.eq(i).css("left",e)}
,e}
();
$.fn.skippr=function(t){
var r;
return(r=this.data("skippr"))?t===!0?r:("string"===$.type(t)&&r[t](),this):this.each(function(){
return $(this).data("skippr",new e(this,t))}
)}
,$.fn.skippr.defaults={
transition:"slide",speed:1e3,easing:"easeOutQuart",navType:"block",childrenElementType:"div",arrows:!0,autoPlay:!1,autoPlayDuration:5e3}
}
).call(this),!function(e,t,r,a){
function o(e){
for(var t=-1,r=e?e.length:0,a=[];
++t<r;
){
var o=e[t];
o&&a.push(o)}
return a}
function n(e){
return"[object Function]"===Object.prototype.toString.call(e)}
function i(e){
return"[object Array]"===Object.prototype.toString.call(e)}
function l(e){
var t=Object.prototype.toString.call(e);
return"object"==typeof e&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(t)&&e.length!==a&&(0===e.length||"object"==typeof e[0]&&e[0].nodeType>0)}
function s(e,t,r,a){
function o(e,t){
return 1-3*t+3*e}
function n(e,t){
return 3*t-6*e}
function i(e){
return 3*e}
function l(e,t,r){
return((o(t,r)*e+n(t,r))*e+i(t))*e}
function s(e,t,r){
return 3*o(t,r)*e*e+2*n(t,r)*e+i(t)}
function u(t){
for(var a=t,o=0;
8>o;
++o){
var n=s(a,e,r);
if(0===n)return a;
var i=l(a,e,r)-t;
a-=i/n}
return a}
if(4!==arguments.length)return!1;
for(var c=0;
4>c;
++c)if("number"!=typeof arguments[c]||isNaN(arguments[c])||!isFinite(arguments[c]))return!1;
e=Math.min(e,1),r=Math.min(r,1),e=Math.max(e,0),r=Math.max(r,0);
var p=function(o){
return e===t&&r===a?o:l(u(o),t,a)}
;
return p}
function u(e){
if(e)for(var t=(new Date).getTime(),r=0,o=h.State.calls.length;
o>r;
r++)if(h.State.calls[r]){
var n=h.State.calls[r],i=n[0],l=n[2],s=n[3];
s||(s=h.State.calls[r][3]=t-16);
for(var d=Math.min((t-s)/l.duration,1),y=0,v=i.length;
v>y;
y++){
var b=i[y],P=b.element;
if(f.data(P,p)){
var x=!1;
l.display&&"none"!==l.display&&m.setPropertyValue(P,"display",l.display);
for(var w in b)if("element"!==w){
var S,V=b[w],k="string"==typeof V.easing?h.Easings[V.easing]:V.easing;
if(S=1===d?V.endValue:V.startValue+(V.endValue-V.startValue)*k(d),V.currentValue=S,m.Hooks.registered[w]){
var C=m.Hooks.getRoot(w),T=f.data(P,p).rootPropertyValueCache[C];
T&&(V.rootPropertyValue=T)}
var $=m.setPropertyValue(P,w,V.currentValue+(0===parseFloat(S)?"":V.unitType),V.rootPropertyValue,V.scrollData);
m.Hooks.registered[w]&&(f.data(P,p).rootPropertyValueCache[C]=m.Normalizations.registered[C]?m.Normalizations.registered[C]("extract",null,$[1]):$[1]),"transform"===$[0]&&(x=!0)}
l.mobileHA&&f.data(P,p).transformCache.translate3d===a&&(f.data(P,p).transformCache.translate3d="(0,0,0)",x=!0),x&&m.flushTransformCache(P)}
}
l.display&&"none"!==l.display&&(h.State.calls[r][2].display=!1),1===d&&c(r)}
h.State.isTicking&&g(u)}
function c(e){
for(var t=h.State.calls[e][0],r=h.State.calls[e][1],o=h.State.calls[e][2],n=!1,i=0,l=t.length;
l>i;
i++){
var s=t[i].element;
if("none"!==o.display||o.loop||m.setPropertyValue(s,"display",o.display),f.queue(s)[1]!==a&&/\.velocityQueueEntryFlag/i.test(f.queue(s)[1])||f.data(s,p)&&(f.data(s,p).isAnimating=!1,f.data(s,p).rootPropertyValueCache={
}
,o.mobileHA&&!h.State.isGingerbread&&(delete f.data(s,p).transformCache.translate3d,m.flushTransformCache(s))),i===l-1&&!o.loop&&o.complete){
var u=r.jquery?r.get():r;
o.complete.call(u,u)}
o.queue!==!1&&f.dequeue(s,o.queue)}
h.State.calls[e]=!1;
for(var c=0,d=h.State.calls.length;
d>c;
c++)if(h.State.calls[c]!==!1){
n=!0;
break}
n===!1&&(h.State.isTicking=!1,delete h.State.calls,h.State.calls=[])}
var p="velocity",d=function(){
if(r.documentMode)return r.documentMode;
for(var e=7;
e>4;
e--){
var t=r.createElement("div");
if(t.innerHTML="<!--[if IE "+e+"]><span></span><![endif]-->",t.getElementsByTagName("span").length)return t=null,e}
return a}
(),g=t.requestAnimationFrame||function(){
var e=0;
return t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||function(t){
var r,a=(new Date).getTime();
return r=Math.max(0,16-(a-e)),e=a+r,setTimeout(function(){
t(a+r)}
,r)}
}
();
if(7>=d){
if(t.jQuery)return void(t.jQuery.fn.velocity=t.jQuery.fn.animate);
throw new Error("For IE<=7,Velocity falls back to jQuery,which must first be loaded.")}
if(8===d&&!t.jQuery)throw new Error("For IE8,Velocity requires jQuery to be loaded.");
if(e.Velocity!==a&&!e.Velocity.Utilities)throw new Error("Velocity's namespace is occupied. Aborting.");
var f=t.jQuery||e.Velocity.Utilities,h=e.Velocity=e.velocity=f.extend(e.Velocity||{
}
,{
State:{
isMobile:/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),isAndroid:/Android/i.test(navigator.userAgent),isGingerbread:/Android 2\.3\.[3-7]/i.test(navigator.userAgent),prefixElement:r.createElement("div"),prefixMatches:{
}
,scrollAnchor:null,scrollPropertyLeft:null,scrollPropertyTop:null,isTicking:!1,calls:[]}
,CSS:{
}
,Sequences:{
}
,Easings:{
}
,defaults:{
queue:"",duration:400,easing:"swing",complete:null,display:null,loop:!1,delay:!1,mobileHA:!0,_cacheValues:!0}
,animate:function(){
}
,debug:!1}
);
t.pageYOffset!==a?(h.State.scrollAnchor=t,h.State.scrollPropertyLeft="pageXOffset",h.State.scrollPropertyTop="pageYOffset"):(h.State.scrollAnchor=r.documentElement||r.body.parentNode||r.body,h.State.scrollPropertyLeft="scrollLeft",h.State.scrollPropertyTop="scrollTop"),function(){
var e={
}
;
f.each(["Quad","Cubic","Quart","Quint","Expo"],function(t,r){
e[r]=function(e){
return Math.pow(e,t+2)}
}
),f.extend(e,{
Sine:function(e){
return 1-Math.cos(e*Math.PI/2)}
,Circ:function(e){
return 1-Math.sqrt(1-e*e)}
,Elastic:function(e){
return 0===e||1===e?e:-Math.pow(2,8*(e-1))*Math.sin((80*(e-1)-7.5)*Math.PI/15)}
,Back:function(e){
return e*e*(3*e-2)}
,Bounce:function(e){
for(var t,r=4;
e<((t=Math.pow(2,--r))-1)/11;
);
return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*t-2)/22-e,2)}
}
),f.each(e,function(e,t){
h.Easings["easeIn"+e]=t,h.Easings["easeOut"+e]=function(e){
return 1-t(1-e)}
,h.Easings["easeInOut"+e]=function(e){
return.5>e?t(2*e)/2:1-t(-2*e+2)/2}
}
),h.Easings.linear=function(e){
return e}
,h.Easings.swing=function(e){
return.5-Math.cos(e*Math.PI)/2}
,h.Easings.ease=s(.25,.1,.25,1),h.Easings["ease-in"]=s(.42,0,1,1),h.Easings["ease-out"]=s(0,0,.58,1),h.Easings["ease-in-out"]=s(.42,0,.58,1),h.Easings.spring=function(e){
return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}
}
();
var m=h.CSS={
RegEx:{
valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi}
,Hooks:{
templates:{
color:["Red Green Blue Alpha","255 255 255 1"],backgroundColor:["Red Green Blue Alpha","255 255 255 1"],borderColor:["Red Green Blue Alpha","255 255 255 1"],borderTopColor:["Red Green Blue Alpha","255 255 255 1"],borderRightColor:["Red Green Blue Alpha","255 255 255 1"],borderBottomColor:["Red Green Blue Alpha","255 255 255 1"],borderLeftColor:["Red Green Blue Alpha","255 255 255 1"],outlineColor:["Red Green Blue Alpha","255 255 255 1"],textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0%"],perspectiveOrigin:["X Y","50% 50%"]}
,registered:{
}
,register:function(){
var e,t,r;
if(d)for(e in m.Hooks.templates){
t=m.Hooks.templates[e],r=t[0].split(" ");
var a=t[1].match(m.RegEx.valueSplit);
"Color"===r[0]&&(r.push(r.shift()),a.push(a.shift()),m.Hooks.templates[e]=[r.join(" "),a.join(" ")])}
for(e in m.Hooks.templates){
t=m.Hooks.templates[e],r=t[0].split(" ");
for(var o in r){
var n=e+r[o],i=o;
m.Hooks.registered[n]=[e,i]}
}
}
,getRoot:function(e){
var t=m.Hooks.registered[e];
return t?t[0]:e}
,cleanRootPropertyValue:function(e,t){
return m.RegEx.valueUnwrap.test(t)&&(t=t.match(m.Hooks.RegEx.valueUnwrap)[1]),m.Values.isCSSNullValue(t)&&(t=m.Hooks.templates[e][1]),t}
,extractValue:function(e,t){
var r=m.Hooks.registered[e];
if(r){
var a=r[0],o=r[1];
return t=m.Hooks.cleanRootPropertyValue(a,t),t.toString().match(m.RegEx.valueSplit)[o]}
return t}
,injectValue:function(e,t,r){
var a=m.Hooks.registered[e];
if(a){
var o,n,i=a[0],l=a[1];
return r=m.Hooks.cleanRootPropertyValue(i,r),o=r.toString().match(m.RegEx.valueSplit),o[l]=t,n=o.join(" ")}
return r}
}
,Normalizations:{
registered:{
clip:function(e,t,r){
switch(e){
case"name":return"clip";
case"extract":var a;
return m.RegEx.wrappedValueAlreadyExtracted.test(r)?a=r:(a=r.toString().match(m.RegEx.valueUnwrap),a&&(a=a[1].replace(/,(\s+)?/g," "))),a;
case"inject":return"rect("+r+")"}
}
,opacity:function(e,t,r){
if(8>=d)switch(e){
case"name":return"filter";
case"extract":var a=r.toString().match(/alpha\(opacity=(.*)\)/i);
return r=a?a[1]/100:1;
case"inject":return t.style.zoom=1,parseFloat(r)>=1?"":"alpha(opacity="+parseInt(100*parseFloat(r),10)+")"}
else switch(e){
case"name":return"opacity";
case"extract":return r;
case"inject":return r}
}
}
,register:function(){
function e(e){
var t,r=/^#?([a-f\d])([a-f\d])([a-f\d])$/i,a=/^#?([a-f\d]{
2}
)([a-f\d]{
2}
)([a-f\d]{
2}
)$/i;
return e=e.replace(r,function(e,t,r,a){
return t+t+r+r+a+a}
),t=a.exec(e),t?"rgb("+(parseInt(t[1],16)+" "+parseInt(t[2],16)+" "+parseInt(t[3],16))+")":"rgb(0 0 0)"}
var t=["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"];
9>=d||(t=t.concat(["transformPerspective","translateZ","scaleZ","rotateX","rotateY"]));
for(var r=0,o=t.length;
o>r;
r++)!function(){
var e=t[r];
m.Normalizations.registered[e]=function(t,r,o){
switch(t){
case"name":return"transform";
case"extract":return f.data(r,p).transformCache[e]===a?/^scale/i.test(e)?1:0:f.data(r,p).transformCache[e].replace(/[()]/g,"");
case"inject":var n=!1;
switch(e.substr(0,e.length-1)){
case"translate":n=!/(%|px|em|rem|\d)$/i.test(o);
break;
case"scal":case"scale":h.State.isAndroid&&f.data(r,p).transformCache[e]===a&&(o=1),n=!/(\d)$/i.test(o);
break;
case"skew":n=!/(deg|\d)$/i.test(o);
break;
case"rotate":n=!/(deg|\d)$/i.test(o)}
return n||(f.data(r,p).transformCache[e]="("+o+")"),f.data(r,p).transformCache[e]}
}
}
();
for(var n=["color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],r=0,i=n.length;
i>r;
r++)!function(){
var t=n[r];
m.Normalizations.registered[t]=function(r,o,n){
switch(r){
case"name":return t;
case"extract":var i;
if(m.RegEx.wrappedValueAlreadyExtracted.test(n))i=n;
else{
var l,s={
aqua:"rgb(0,255,255);
",black:"rgb(0,0,0)",blue:"rgb(0,0,255)",fuchsia:"rgb(255,0,255)",gray:"rgb(128,128,128)",green:"rgb(0,128,0)",lime:"rgb(0,255,0)",maroon:"rgb(128,0,0)",navy:"rgb(0,0,128)",olive:"rgb(128,128,0)",purple:"rgb(128,0,128)",red:"rgb(255,0,0)",silver:"rgb(192,192,192)",teal:"rgb(0,128,128)",white:"rgb(255,255,255)",yellow:"rgb(255,255,0)"}
;
/^[A-z]+$/i.test(n)?l=s[n]!==a?s[n]:s.black:/^#([A-f\d]{
3}
){
1,2}
$/i.test(n)?l=e(n):/^rgba?\(/i.test(n)||(l=s.black),i=(l||n).toString().match(m.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g," ")}
return 8>=d||3!==i.split(" ").length||(i+=" 1"),i;
case"inject":return 8>=d?4===n.split(" ").length&&(n=n.split(/\s+/).slice(0,3).join(" ")):3===n.split(" ").length&&(n+=" 1"),(8>=d?"rgb":"rgba")+"("+n.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")"}
}
}
()}
}
,Names:{
camelCase:function(e){
return e.replace(/-(\w)/g,function(e,t){
return t.toUpperCase()}
)}
,prefixCheck:function(e){
if(h.State.prefixMatches[e])return[h.State.prefixMatches[e],!0];
for(var t=["","Webkit","Moz","ms","O"],r=0,a=t.length;
a>r;
r++){
var o;
if(o=0===r?e:t[r]+e.replace(/^\w/,function(e){
return e.toUpperCase()}
),"string"==typeof h.State.prefixElement.style[o])return h.State.prefixMatches[e]=o,[o,!0]}
return[e,!1]}
}
,Values:{
isCSSNullValue:function(e){
return 0==e||/^(none|auto|transparent|(rgba\(0,?0,?0,?0\)))$/i.test(e)}
,getUnitType:function(e){
return/^(rotate|skew)/i.test(e)?"deg":/(^(scale|scaleX|scaleY|scaleZ|opacity|alpha|fillOpacity|flexGrow|flexHeight|zIndex|fontWeight)$)|color/i.test(e)?"":"px"}
,getDisplayType:function(e){
var t=e.tagName.toString().toLowerCase();
return/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(t)?"inline":/^(li)$/i.test(t)?"list-item":"block"}
}
,getPropertyValue:function(e,r,o,n){
function i(e,r){
var o=0;
if(8>=d)o=f.css(e,r);
else{
if(!n){
if("height"===r&&"border-box"!==m.getPropertyValue(e,"boxSizing").toString().toLowerCase())return e.offsetHeight-(parseFloat(m.getPropertyValue(e,"borderTopWidth"))||0)-(parseFloat(m.getPropertyValue(e,"borderBottomWidth"))||0)-(parseFloat(m.getPropertyValue(e,"paddingTop"))||0)-(parseFloat(m.getPropertyValue(e,"paddingBottom"))||0);
if("width"===r&&"border-box"!==m.getPropertyValue(e,"boxSizing").toString().toLowerCase())return e.offsetWidth-(parseFloat(m.getPropertyValue(e,"borderLeftWidth"))||0)-(parseFloat(m.getPropertyValue(e,"borderRightWidth"))||0)-(parseFloat(m.getPropertyValue(e,"paddingLeft"))||0)-(parseFloat(m.getPropertyValue(e,"paddingRight"))||0)}
var l;
l=f.data(e,p)===a?t.getComputedStyle(e,null):f.data(e,p).computedStyle?f.data(e,p).computedStyle:f.data(e,p).computedStyle=t.getComputedStyle(e,null),d&&"borderColor"===r&&(r="borderTopColor"),o=9===d&&"filter"===r?l.getPropertyValue(r):l[r],(""===o||null===o)&&(o=e.style[r])}
if("auto"===o&&/^(top|right|bottom|left)$/i.test(r)){
var s=i(e,"position");
("fixed"===s||"absolute"===s&&/top|left/i.test(r))&&(o=f(e).position()[r]+"px")}
return o}
var l;
if(m.Hooks.registered[r]){
var s=r,u=m.Hooks.getRoot(s);
o===a&&(o=m.getPropertyValue(e,m.Names.prefixCheck(u)[0])),m.Normalizations.registered[u]&&(o=m.Normalizations.registered[u]("extract",e,o)),l=m.Hooks.extractValue(s,o)}
else if(m.Normalizations.registered[r]){
var c,g;
c=m.Normalizations.registered[r]("name",e),"transform"!==c&&(g=i(e,m.Names.prefixCheck(c)[0]),m.Values.isCSSNullValue(g)&&m.Hooks.templates[r]&&(g=m.Hooks.templates[r][1])),l=m.Normalizations.registered[r]("extract",e,g)}
return/^[\d-]/.test(l)||(l=i(e,m.Names.prefixCheck(r)[0])),m.Values.isCSSNullValue(l)&&(l=0),h.debug>=2&&console.log("Get "+r+":"+l),l}
,setPropertyValue:function(e,r,a,o,n){
var i=r;
if("scroll"===r)n.container?n.container["scroll"+n.direction]=a:"Left"===n.direction?t.scrollTo(a,n.alternateValue):t.scrollTo(n.alternateValue,a);
else if(m.Normalizations.registered[r]&&"transform"===m.Normalizations.registered[r]("name",e))m.Normalizations.registered[r]("inject",e,a),i="transform",a=f.data(e,p).transformCache[r];
else{
if(m.Hooks.registered[r]){
var l=r,s=m.Hooks.getRoot(r);
o=o||m.getPropertyValue(e,s),a=m.Hooks.injectValue(l,a,o),r=s}
if(m.Normalizations.registered[r]&&(a=m.Normalizations.registered[r]("inject",e,a),r=m.Normalizations.registered[r]("name",e)),i=m.Names.prefixCheck(r)[0],8>=d)try{
e.style[i]=a}
catch(u){
console.log("Error setting ["+i+"] to ["+a+"]")}
else e.style[i]=a;
h.debug>=2&&console.log("Set "+r+" ("+i+"):"+a)}
return[i,a]}
,flushTransformCache:function(e){
var t,r,a,o="";
for(t in f.data(e,p).transformCache)r=f.data(e,p).transformCache[t],"transformPerspective"!==t?(9===d&&"rotateZ"===t&&(t="rotate"),o+=t+r+" "):a=r;
a&&(o="perspective"+a+" "+o),m.setPropertyValue(e,"transform",o)}
}
;
m.Hooks.register(),m.Normalizations.register(),h.animate=function(){
function e(e){
var t=e;
return"string"==typeof e?h.Easings[e]||(t=!1):t=i(e)?s.apply(null,e):!1,t===!1&&(t=h.Easings[h.defaults.easing]?h.defaults.easing:"swing"),t}
function c(){
function t(){
function t(t){
var r=a,o=a,u=a;
return i(t)?(r=t[0],!i(t[1])&&/^[\d-]/.test(t[1])||n(t[1])?u=t[1]:("string"==typeof t[1]||i(t[1]))&&(o=e(t[1]),t[2]&&(u=t[2]))):r=t,o=o||s.easing,n(r)&&(r=r.call(l,x,P)),n(u)&&(u=u.call(l,x,P)),[r||0,o,u]}
function g(e,t){
var r,a;
return a=(t||0).toString().toLowerCase().replace(/[%A-z]+$/,function(e){
return r=e,""}
),r||(r=m.Values.getUnitType(e)),[a,r]}
function w(){
var e={
parent:l.parentNode,position:m.getPropertyValue(l,"position"),fontSize:m.getPropertyValue(l,"fontSize")}
,t=e.position===k.lastPosition&&e.parent===k.lastParent,a=e.fontSize===k.lastFontSize&&e.parent===k.lastParent;
k.lastParent=e.parent,k.lastPosition=e.position,k.lastFontSize=e.fontSize,null===k.remToPxRatio&&(k.remToPxRatio=parseFloat(m.getPropertyValue(r.body,"fontSize"))||16);
var o={
overflowX:null,overflowY:null,boxSizing:null,width:null,minWidth:null,maxWidth:null,height:null,minHeight:null,maxHeight:null,paddingLeft:null}
,n={
}
,i=10;
if(n.remToPxRatio=k.remToPxRatio,d)var s=/^auto$/i.test(l.currentStyle.width),u=/^auto$/i.test(l.currentStyle.height);
t&&a||(o.overflowX=m.getPropertyValue(l,"overflowX"),o.overflowY=m.getPropertyValue(l,"overflowY"),o.boxSizing=m.getPropertyValue(l,"boxSizing"),o.width=m.getPropertyValue(l,"width",null,!0),o.minWidth=m.getPropertyValue(l,"minWidth"),o.maxWidth=m.getPropertyValue(l,"maxWidth")||"none",o.height=m.getPropertyValue(l,"height",null,!0),o.minHeight=m.getPropertyValue(l,"minHeight"),o.maxHeight=m.getPropertyValue(l,"maxHeight")||"none",o.paddingLeft=m.getPropertyValue(l,"paddingLeft")),t?(n.percentToPxRatioWidth=k.lastPercentToPxWidth,n.percentToPxRatioHeight=k.lastPercentToPxHeight):(m.setPropertyValue(l,"overflowX","hidden"),m.setPropertyValue(l,"overflowY","hidden"),m.setPropertyValue(l,"boxSizing","content-box"),m.setPropertyValue(l,"width",i+"%"),m.setPropertyValue(l,"minWidth",i+"%"),m.setPropertyValue(l,"maxWidth",i+"%"),m.setPropertyValue(l,"height",i+"%"),m.setPropertyValue(l,"minHeight",i+"%"),m.setPropertyValue(l,"maxHeight",i+"%")),a?n.emToPxRatio=k.lastEmToPx:m.setPropertyValue(l,"paddingLeft",i+"em"),t||(n.percentToPxRatioWidth=k.lastPercentToPxWidth=(parseFloat(m.getPropertyValue(l,"width",null,!0))||1)/i,n.percentToPxRatioHeight=k.lastPercentToPxHeight=(parseFloat(m.getPropertyValue(l,"height",null,!0))||1)/i),a||(n.emToPxRatio=k.lastEmToPx=(parseFloat(m.getPropertyValue(l,"paddingLeft"))||1)/i);
for(var c in o)null!==o[c]&&m.setPropertyValue(l,c,o[c]);
return d?(s&&m.setPropertyValue(l,"width","auto"),u&&m.setPropertyValue(l,"height","auto")):(m.setPropertyValue(l,"height","auto"),o.height!==m.getPropertyValue(l,"height",null,!0)&&m.setPropertyValue(l,"height",o.height),m.setPropertyValue(l,"width","auto"),o.width!==m.getPropertyValue(l,"width",null,!0)&&m.setPropertyValue(l,"width",o.width)),h.debug>=1&&console.log("Unit ratios:"+JSON.stringify(n),l),n}
if(0===x&&b&&n(b.begin)){
var S=y.jquery?y.get():y;
b.begin.call(S,S)}
if("scroll"===V){
var T,$,H,R=/^x$/i.test(s.axis)?"Left":"Top",E=parseFloat(s.offset)||0;
s.container?s.container.jquery||s.container.nodeType?(s.container=s.container[0]||s.container,T=s.container["scroll"+R],H=T+f(l).position()[R.toLowerCase()]+E):s.container=null:(T=h.State.scrollAnchor[h.State["scrollProperty"+R]],$=h.State.scrollAnchor[h.State["scrollProperty"+("Left"===R?"Top":"Left")]],H=f(l).offset()[R.toLowerCase()]+E),c={
scroll:{
rootPropertyValue:!1,startValue:T,currentValue:T,endValue:H,unitType:"",easing:s.easing,scrollData:{
container:s.container,direction:R,alternateValue:$}
}
,element:l}
}
else if("reverse"===V){
if(!f.data(l,p).tweensContainer)return void f.dequeue(l,s.queue);
"none"===f.data(l,p).opts.display&&(f.data(l,p).opts.display="block"),f.data(l,p).opts.loop=!1,f.data(l,p).opts.begin=null,f.data(l,p).opts.complete=null,s=f.extend({
}
,f.data(l,p).opts,b);
var z=f.extend(!0,{
}
,f.data(l,p).tweensContainer);
for(var A in z)if("element"!==A){
var q=z[A].startValue;
z[A].startValue=z[A].currentValue=z[A].endValue,z[A].endValue=q,b&&(z[A].easing=s.easing)}
c=z}
else if("start"===V){
var z;
f.data(l,p).tweensContainer&&f.data(l,p).isAnimating===!0&&(z=f.data(l,p).tweensContainer);
for(var j in v){
var N=t(v[j]),F=N[0],M=N[1],L=N[2];
j=m.Names.camelCase(j);
var B=m.Hooks.getRoot(j),O=!1;
if(m.Names.prefixCheck(B)[1]!==!1||m.Normalizations.registered[B]!==a){
s.display&&"none"!==s.display&&/opacity|filter/.test(j)&&!L&&0!==F&&(L=0),s._cacheValues&&z&&z[j]?(L===a&&(L=z[j].endValue+z[j].unitType),O=f.data(l,p).rootPropertyValueCache[B]):m.Hooks.registered[j]?L===a?(O=m.getPropertyValue(l,B),L=m.getPropertyValue(l,j,O)):O=m.Hooks.templates[B][1]:L===a&&(L=m.getPropertyValue(l,j));
var I,W,X,Y;
I=g(j,L),L=I[0],X=I[1],I=g(j,F),F=I[0].replace(/^([+-\/*])=/,function(e,t){
return Y=t,""}
),W=I[1],L=parseFloat(L)||0,F=parseFloat(F)||0;
var Q;
if("%"===W&&(/^(fontSize|lineHeight)$/.test(j)?(F/=100,W="em"):/^scale/.test(j)?(F/=100,W=""):/(Red|Green|Blue)$/i.test(j)&&(F=F/100*255,W="")),/[\/*]/.test(Y))W=X;
else if(X!==W&&0!==L)if(0===F)W=X;
else{
Q=Q||w();
var G=/margin|padding|left|right|width|text|word|letter/i.test(j)||/X$/.test(j)?"x":"y";
switch(X){
case"%":L*="x"===G?Q.percentToPxRatioWidth:Q.percentToPxRatioHeight;
break;
case"em":L*=Q.emToPxRatio;
break;
case"rem":L*=Q.remToPxRatio;
break;
case"px":}
switch(W){
case"%":L*=1/("x"===G?Q.percentToPxRatioWidth:Q.percentToPxRatioHeight);
break;
case"em":L*=1/Q.emToPxRatio;
break;
case"rem":L*=1/Q.remToPxRatio;
break;
case"px":}
}
switch(Y){
case"+":F=L+F;
break;
case"-":F=L-F;
break;
case"*":F=L*F;
break;
case"/":F=L/F}
c[j]={
rootPropertyValue:O,startValue:L,currentValue:L,endValue:F,unitType:W,easing:M}
,h.debug&&console.log("tweensContainer ("+j+"):"+JSON.stringify(c[j]),l)}
else h.debug&&console.log("Skipping ["+B+"] due to a lack of browser support.")}
c.element=l}
c.element&&(C.push(c),f.data(l,p).tweensContainer=c,f.data(l,p).opts=s,f.data(l,p).isAnimating=!0,x===P-1?(h.State.calls.length>1e4&&(h.State.calls=o(h.State.calls)),h.State.calls.push([C,y,s]),h.State.isTicking===!1&&(h.State.isTicking=!0,u())):x++)}
var l=this,s=f.extend({
}
,h.defaults,b),c={
}
;
if("stop"===V)return f.queue(l,"string"==typeof b?b:"",[]),!0;
switch(f.data(l,p)===a&&f.data(l,p,{
isAnimating:!1,computedStyle:null,tweensContainer:null,rootPropertyValueCache:{
}
,transformCache:{
}
}
),s.duration.toString().toLowerCase()){
case"fast":s.duration=200;
break;
case"normal":s.duration=400;
break;
case"slow":s.duration=600;
break;
default:s.duration=parseFloat(s.duration)||1}
s.easing=e(s.easing),/^\d/.test(s.delay)&&f.queue(l,s.queue,function(e){
h.velocityQueueEntryFlag=!0,setTimeout(e,parseFloat(s.delay))}
),s.display&&(s.display=s.display.toString().toLowerCase()),s.mobileHA=s.mobileHA&&h.State.isMobile,s.queue===!1?t():f.queue(l,s.queue,function(e){
h.velocityQueueEntryFlag=!0,t(e)}
),""!==s.queue&&"fx"!==s.queue||"inprogress"===f.queue(l)[0]||f.dequeue(l)}
var g,y,v,b;
this.jquery||t.Zepto&&t.Zepto.zepto.isZ(this)?(g=!0,y=this,v=arguments[0],b=arguments[1]):(g=!1,y=arguments[0].jquery?[].slice.call(arguments[0]):arguments[0],v=arguments[1],b=arguments[2]);
var P=l(y)||i(y)?y.length:1,x=0;
if("stop"!==v&&!f.isPlainObject(b)){
var w=g?1:2;
b={
}
;
for(var S=w;
S<arguments.length;
S++)!i(arguments[S])&&/^\d/.test(arguments[S])?b.duration=parseFloat(arguments[S]):"string"==typeof arguments[S]?b.easing=arguments[S]:i(arguments[S])&&4===arguments[S].length?b.easing=arguments[S]:n(arguments[S])&&(b.complete=arguments[S])}
var V;
switch(v){
case"scroll":V="scroll";
break;
case"reverse":V="reverse";
break;
case"stop":V="stop";
break;
default:if(!f.isPlainObject(v)||f.isEmptyObject(v))return"string"==typeof v&&h.Sequences[v]?(f.each(y,function(e,t){
h.Sequences[v].call(t,t,b||{
}
,e,P)}
),y):(h.debug&&console.log("First argument was not a property map,a known action,or a registered sequence. Aborting."),y);
V="start"}
var k={
lastParent:null,lastPosition:null,lastFontSize:null,lastPercentToPxWidth:null,lastPercentToPxHeight:null,lastEmToPx:null,remToPxRatio:null}
,C=[];
if(b&&b.complete&&!n(b.complete)&&(b.complete=null),g)y.each(c);
else if(1===P&&y.nodeType)c.call(y);
else for(var T in y)y[T].nodeType&&c.call(y[T]);
var $,H=f.extend({
}
,h.defaults,b);
if(H.loop=parseInt(H.loop),$=2*H.loop-1,H.loop)for(var R=0;
$>R;
R++){
var E={
delay:H.delay}
;
H.complete&&R===$-1&&(E.complete=H.complete),g?y.velocity("reverse",E):h.animate(y,"reverse",E)}
return y}
;
var y=t.jQuery||t.Zepto;
y&&(y.fn.velocity=h.animate,y.fn.velocity.defaults=h.defaults),f.each(["Down","Up"],function(e,t){
h.Sequences["slide"+t]=function(e,r){
var a=f.extend({
}
,r),o={
height:null,marginTop:null,marginBottom:null,paddingTop:null,paddingBottom:null,overflow:null,overflowX:null,overflowY:null}
,n=a.begin,i=a.complete,l=!1;
a.display="Down"===t?a.display||"block":a.display||"none",a.begin=function(){
function r(){
e.style.display="block",o.height=h.CSS.getPropertyValue(e,"height"),e.style.height="auto",h.CSS.getPropertyValue(e,"height")===o.height&&(l=!0),h.CSS.setPropertyValue(e,"height",o.height+"px")}
if("Down"===t){
o.overflow=[h.CSS.getPropertyValue(e,"overflow"),0],o.overflowX=[h.CSS.getPropertyValue(e,"overflowX"),0],o.overflowY=[h.CSS.getPropertyValue(e,"overflowY"),0],e.style.overflow="hidden",e.style.overflowX="visible",e.style.overflowY="hidden",r();
for(var a in o)/^overflow/.test(a)||(o[a]=[h.CSS.getPropertyValue(e,a),0]);
e.style.display="none"}
else{
r();
for(var a in o)o[a]=[0,h.CSS.getPropertyValue(e,a)];
e.style.overflow="hidden",e.style.overflowX="visible",e.style.overflowY="hidden"}
n&&n.call(e,e)}
,a.complete=function(e){
var r="Down"===t?0:1;
l===!0?o.height[r]="auto":o.height[r]+="px";
for(var a in o)e.style[a]=o[a][r];
i&&i.call(e,e)}
,h.animate(e,o,a)}
}
),f.each(["In","Out"],function(e,t){
h.Sequences["fade"+t]=function(e,r,a,o){
var n=f.extend({
}
,r),i={
opacity:"In"===t?1:0}
;
a!==o-1&&(n.complete=n.begin=null),n.display||(n.display="In"===t?h.CSS.Values.getDisplayType(e):"none"),h.animate(this,i,n)}
}
)}
(window.jQuery||window.Zepto||window,window,document);
CSS代码(style.css):
html,body{height:100%;width:100%;-webkit-font-smoothing:antialiased;font-family:"Helvetica Neue","HelveticaNeue","Helvetica-Neue",Helvetica,Arial,sans-serif;}
.yellow{background-color:#ffdb56;}
.btn{width:200px;height:55px;border:2px solid white;color:white;-webkit-transition:all 0.25s ease;-moz-transition:all 0.25s ease;transition:all 0.25s ease;cursor:pointer;line-height:220%;}
.btn:hover{background-color:white;color:#ffdb56;}
.hero{width:100%;height:80%;min-height:500px;position:relative;}
.hero .container{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:80%;height:80%;z-index:999;}
.hero .tagline{font-family:"Helvetica Neue","HelveticaNeue","Helvetica-Neue",Helvetica,Arial,sans-serif;font-weight:bold;letter-spacing:-3px;width:40%;padding:8% 0 0 0;float:left;color:white;}
.hero .tagline p{font-size:4rem;line-height:4rem;margin-top:10px;}
@media (max-width:1450px){.hero .tagline p{font-size:2.8rem;line-height:2.8rem;letter-spacing:-2px;}
}
@media (max-width:600px){.hero .tagline p{font-size:2rem;}
}
.hero .tagline h1{font-weight:bold;font-size:7rem;letter-spacing:-0.25rem;line-height:7rem;}
@media (max-width:1450px){.hero .tagline h1{font-size:5rem;line-height:5rem;}
}
@media (max-width:1450px){.hero .tagline{padding:9% 0 0 0;}
}
@media (max-width:800px){.hero .tagline{float:none;width:100%;margin-bottom:70px;}
}
.hero .downloads{float:right;width:40%;color:white;font-family:"Helvetica Neue","HelveticaNeue","Helvetica-Neue",Helvetica,Arial,sans-serif;font-weight:bold;letter-spacing:-1px;font-size:1.5rem;height:100%;position:relative;}
.hero .downloads .btn-container{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100%;}
.hero .downloads .btn-container .btn{float:right;text-align:center;margin-left:20px;}
@media (max-width:800px){.hero .downloads .btn-container .btn{float:left;margin:20px 20px 0 0;}
}
@media (max-width:800px){.hero .downloads{float:none;width:100%;height:auto;}
}
.content{width:80%;height:auto;margin:0 auto;color:#464646;letter-spacing:-1px;padding:75px 0 75px 0;}
.content h2{font-size:3rem;font-weight:bold;margin:0 0 10px 0;}
.content p{font-size:1.4rem;font-weight:normal;}
.content code{display:block;min-height:100px;width:100%;margin:20px 0 20px 0;padding:10px 0;}
code{background-color:#464646;color:#ffdb56;font-size:1rem;}
@media (max-width:800px){code{font-size:.8rem;}
}
@media (max-width:600px){code{font-size:.5rem;}
}
#code-header{margin-bottom:0px;}
#code-footer{margin-top:0px;}
.code-comment{font-style:italic;color:gray;}
hr{margin:50px 0;}
.download{position:relative;width:100%;height:250px;background-color:#ffdb56;margin-top:100px;color:white;font-weight:bold;letter-spacing:-1px;font-size:1.5rem;}
.download h1{font-weight:bold;font-size:7rem;letter-spacing:-0.25rem;line-height:7rem;}
@media (max-width:1450px){.download h1{font-size:5rem;line-height:5rem;}
}
.download .btn{text-align:center;}
.download > div{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:80%;}
.download > div > *{float:left;}
.download > div .btn-container{width:500px;float:right;margin-top:10px;}
.download > div .btn-container .btn{float:right;margin-left:20px;}
@media (max-width:800px){.download{display:none;}
}
footer{width:100%;height:400px;background-color:#464646;position:relative;}
footer .info{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;color:white;font-size:1.25rem;letter-spacing:-1px;}
footer .info a{color:white;}
分享到QQ
分享到微博
微信扫一扫
