以下是 五种切换效果的jQuery幻灯片特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>五种切换效果的jQuery幻灯片</title>
<link rel="stylesheet" href="css/base.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/Modernizr.js"></script>
<script type="text/javascript">
var fx = {
buffer : function(obj, cur, target, fnDo, fnEnd, fs){
if(!fs)fs=6;
var now={};
var x=0;
var v=0;
if(!obj.__last_timer)obj.__last_timer=0;
var t=new Date().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove, 20);
function fnMove(){
v=Math.ceil((100-x)/fs);
x+=v;
for(var i in cur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj, now);
if(Math.abs(v)<1 && Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj, target);
}
}
},
flex : function(obj, cur, target, fnDo, fnEnd, fs, ms){
var MAX_SPEED=16;
if(!fs)fs=6;
if(!ms)ms=0.75;
var now={};
var x=0; //0-100
if(!obj.__flex_v)obj.__flex_v=0;
if(!obj.__last_timer)obj.__last_timer=0;
var t=new Date().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove, 20);
function fnMove(){
obj.__flex_v+=(100-x)/fs;
obj.__flex_v*=ms;
if(Math.abs(obj.__flex_v)>MAX_SPEED)obj.__flex_v=obj.__flex_v>0?MAX_SPEED:-MAX_SPEED;
x+=obj.__flex_v;
for(var i in cur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj, now);
if(Math.abs(obj.__flex_v)<1 && Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj, target);
obj.__flex_v=0;
}
}
},
linear : function (obj, cur, target, fnDo, fnEnd, fs){
if(!fs)fs=50;
var now={};
var x=0;
var v=0;
if(!obj.__last_timer)obj.__last_timer=0;
var t=new Date().getTime();
if(t-obj.__last_timer>20)
{
fnMove();
obj.__last_timer=t;
}
clearInterval(obj.timer);
obj.timer=setInterval(fnMove, 20);
v=100/fs;
function fnMove(){
x+=v;
for(var i in cur)
{
now[i]=(target[i]-cur[i])*x/100+cur[i];
}
if(fnDo)fnDo.call(obj, now);
if(Math.abs(100-x)<1)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd.call(obj, target);
}
}
},
stop:function (obj){
clearInterval(obj.timer);
},
move3 : function(obj, json, fnEnd, fTime, sType){
var addEnd=fx.addEnd;
fTime||(fTime=1);
sType||(sType='ease');
setTimeout(function (){
Utils.setStyle3(obj, 'transition', sprintf('%1s all %2', fTime, sType));
addEnd(obj, function (){
Utils.setStyle3(obj, 'transition', 'none');
if(fnEnd)fnEnd.apply(obj, arguments);
}, json);
setTimeout(function (){
if(typeof json=='function')
json.call(obj);
else
Utils.setStyle(obj, json);
}, 0);
}, 0);
}
};
//监听css3运动终止
(function (){
var aListener=[]; //{obj, fn, arg}
if(!Modernizr.csstransitions)return;
if(window.navigator.userAgent.toLowerCase().search('webkit')!=-1)
{
document.addEventListener('webkitTransitionEnd', endListrner, false);
}
else
{
document.addEventListener('transitionend', endListrner, false);
}
function endListrner(ev)
{
var oEvObj=ev.srcElement||ev.target;
//alert(aListener.length);
for(var i=0;i<aListener.length;i++)
{
if(oEvObj==aListener[i].obj)
{
aListener[i].fn.call(aListener[i].obj, aListener[i].arg);
aListener.remove(aListener[i--]);
}
}
}
fx.addEnd=function (obj, fn, arg)
{
if(!obj || !fn)return;
aListener.push({obj: obj, fn: fn, arg: arg});
}
})();
$(function(){
var now=0;
var ready=true;
var W=700;
var H=400;
var $img = $("#img");
var oDiv = $img.get(0);
var next =function(){
return (now+1)%3;
}
//爆炸
$("#btn_explode").on("click",function(){
if(!ready)return;
ready=false;
var R=4;
var C=7;
var cw=W/2;
var ch=H/2;
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
var aData=[];
var wait=R*C;
for(var i=0;i<R;i++){
for(var j=0,k=0;j<C;j++,k++)
{
aData[i]={left: W*j/C, top: H*i/R};
var oNewDiv=$('<div>');
oNewDiv.css({
position: 'absolute',
width:Math.ceil(W/C)+'px',
height: Math.ceil(H/R)+'px',
background: 'url(images/'+(now+1)+'.jpg) '+-aData[i].left+'px '+-aData[i].top+'px no-repeat',
left: aData[i].left+'px',
top: aData[i].top+'px'
});
oDiv.appendChild(oNewDiv[0]);
var l=((aData[i].left+W/(2*C))-cw)*Utils.rnd(2,3)+cw-W/(2*C);
var t=((aData[i].top+H/(2*R))-ch)*Utils.rnd(2,3)+ch-H/(2*R);
setTimeout((function (oNewDiv,l,t){
return function ()
{
fx.buffer(
oNewDiv,
{ left: oNewDiv.offsetLeft,
top: oNewDiv.offsetTop ,
opacity: 100,
x:0,
y:0,
z:0,
scale:1,
a:0
},
{ left: l,
top: t,
opacity: 0,
x:Utils.rnd(-180, 180),
y:Utils.rnd(-180, 180),
z:Utils.rnd(-180, 180),
scale:Utils.rnd(1.5, 3),
a:1
},
function (now){
this.style.left=now.left+'px';
this.style.top=now.top+'px';
this.style.opacity=now.opacity/100;
Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateX('+now.x+'deg) rotateY('+now.y+'deg) rotateZ('+now.z+'deg) scale('+now.scale+')');
}, function (){
setTimeout(function (){
oDiv.removeChild(oNewDiv);
}, 200);
if(--wait==0)
{
ready=true;
now=next();
}
}, 10
);
};
})(oNewDiv[0],l,t), Utils.rnd(0, 200));
}
}
});
//翻转
$("#btn_tile").on("click",function(){
if(!ready)return;
ready=false;
var R=3;
var C=6;
var wait=R*C;
var dw=Math.ceil(W/C);
var dh=Math.ceil(H/R);
oDiv.style.background='none';
oDiv.innerHTML='';
for(var i=0;i<C;i++)
{
for(var j=0;j<R;j++)
{
var oNewDiv=document.createElement('div');
var t=Math.ceil(H*j/R);
var l=Math.ceil(W*i/C);
Utils.setStyle(oNewDiv, {
position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) '+-l+'px '+-t+'px no-repeat',
left: l+'px', top: t+'px', width: dw+'px', height: dh+'px'
});
(function (oNewDiv, l, t){
oNewDiv.ch=false;
setTimeout(function (){
fx.linear(oNewDiv, {y:0}, {y:180}, function (now){
if(now.y>90 && !oNewDiv.ch)
{
oNewDiv.ch=true;
oNewDiv.style.background='url(images/'+(next()+1)+'.jpg) '+-l+'px '+-t+'px no-repeat';
}
if(now.y>90)
{
Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg) scale(-1,1)');
}
else
{
Utils.setStyle3(oNewDiv, 'transform', 'perspective(500px) rotateY('+now.y+'deg)');
}
}, function (){
if((--wait)==0)
{
ready=true;
now=next();
}
}, 22);
}, /*(i+j*R)*120*/(i+j)*200);
})(oNewDiv, l, t);
oDiv.appendChild(oNewDiv);
}
}
});
//扭曲
$("#btn_bars").on("click",function(){
if(!ready)return;
ready=false;
var C=7;
var wait=C;
var dw=Math.ceil(W/C);
oDiv.style.background='none';
oDiv.innerHTML='';
for(var i=0;i<C;i++)
{
var oNewDiv=document.createElement('div');
Utils.setStyle(oNewDiv, {
width: dw+'px', height: '100%', position: 'absolute', left: W*i/C+'px', top: 0
});
Utils.setStyle3(oNewDiv, 'transformStyle', 'preserve-3d');
Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateX(0deg)');
//setStyle3(oNewDiv, 'transition', '0.5s all linear');
(function (oNewDiv,i){
oNewDiv.style.zIndex=C/2-Math.abs(i-C/2);
setTimeout(function (){
fx.buffer(oNewDiv, {a:0, x:0}, {a:100, x:-90}, function (now){
Utils.setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+((3*(i-C/2))*(50-Math.abs(now.a-50))/50)+'deg) rotateX('+now.x+'deg)');
}, function (){
if(--wait==0)
{
ready=true;
}
now=next();
}, 8);
//setStyle3(oNewDiv, 'transform', 'perspective(1000px) rotateY('+3*(i-C/2)+'deg) rotateX(-45deg)');
}, (i+1)*130);
})(oNewDiv,i);
oNewDiv.innerHTML='<div></div><div></div><div></div><div></div>';
var oNext=oNewDiv.getElementsByTagName('div')[0];
var oNow=oNewDiv.getElementsByTagName('div')[1];
var oBack=oNewDiv.getElementsByTagName('div')[2];
var oBack2=oNewDiv.getElementsByTagName('div')[3];
Utils.setStyle([oNext, oNow, oBack, oBack2], {width: '100%', height: '100%', position: 'absolute', left: 0, top: 0});
Utils.setStyle(oNext, {
background: 'url(images/'+(next()+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
});
Utils.setStyle3(oNext, 'transform', 'scale3d(0.836,0.836,0.836) rotateX(90deg) translateZ('+H/2+'px)');
Utils.setStyle(oNow, {
background: 'url(images/'+(now+1)+'.jpg) '+-W*i/C+'px 0px no-repeat'
});
Utils.setStyle3(oNow, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ('+H/2+'px)');
Utils.setStyle(oBack, {
background: '#666'
});
Utils.setStyle3(oBack, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(0deg) translateZ(-'+H/2+'px)');
Utils.setStyle(oBack2, {
background: '#666'
});
Utils.setStyle3(oBack2, 'transform', 'scale3d(0.834,0.834,0.834) rotateX(90deg) translateZ(-'+H/2+'px)');
oDiv.appendChild(oNewDiv);
}
});
//立方体
$("#btn_cube").on("click",function(){
if(!ready)return;
ready=false;
oDiv.innerHTML='';
oDiv.style.background='none';
Utils.setStyle3(oDiv, 'transformStyle', 'preserve-3d');
Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY(0deg)');
var oNow=document.createElement('div');
var oNext=document.createElement('div');
Utils.setStyle([oNow, oNext], {
position: 'absolute',
width: '100%',
height: '100%',
left: 0,
top: 0
});
Utils.setStyle3(oNow, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,0deg) translate3d(0,0,'+W/2+'px)');
Utils.setStyle3(oNext, 'transform', 'scale3d(0.741,0.741,0.741) rotate3d(0,1,0,90deg) translate3d(0,0,'+W/2+'px)');
oDiv.appendChild(oNext);
oDiv.appendChild(oNow);
oNow.style.background='url(images/'+(now+1)+'.jpg) center no-repeat';
oNext.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
//return;
setTimeout(function (){
//setStyle3(oDiv, 'transition', '1s all ease-in-out');
fx.flex(oDiv, {y:0}, {y:-90}, function (now){
Utils.setStyle3(oDiv, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
}, function (){
Utils.setStyle3(oDiv, 'transition', 'none');
Utils.setStyle3(oDiv, 'transformStyle', 'flat');
Utils.setStyle3(oDiv, 'transform', 'none');
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
now=next();
ready=true;
}, 10, 0.6);
},0);
});
//翻页
$("#btn_turn").on("click",function(){
if(!ready)return;
ready=false;
oDiv.innerHTML='';
oDiv.style.background='url(images/'+(next()+1)+'.jpg) center no-repeat';
var oDivPage=document.createElement('div');
Utils.setStyle(oDivPage, {
position: 'absolute', background: 'url(images/'+(now+1)+'.jpg) right no-repeat', zIndex: 3,
left: '50%', top: 0, width: '50%', height: '100%', overflow: 'hidden'
});
Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY(0deg)');
Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
oDiv.appendChild(oDivPage);
var oDivOld=document.createElement('div');
Utils.setStyle(oDivOld, {
position: 'absolute', left: 0, top: 0, width: '50%', height: '100%', zIndex:2,
background: 'url(images/'+(now+1)+'.jpg) left no-repeat'
});
oDiv.appendChild(oDivOld);
var oDivShadow=document.createElement('div');
Utils.setStyle(oDivShadow, {
position: 'absolute', right: 0, top: 0, width: '50%', height: '100%', zIndex:2,
background: 'rgba(0,0,0,1)'
});
oDiv.appendChild(oDivShadow);
oDivPage.ch=false;
fx.buffer(oDivPage, {y:0, opacity: 1}, {y:-180, opacity: 0}, function (now){
if(now.y<-90 && !oDivPage.ch)
{
oDivPage.ch=true;
oDivPage.innerHTML='<img />';
var oImg=oDivPage.getElementsByTagName('img')[0];
oImg.src='images//'+(next()+1)+'.jpg';
Utils.setStyle3(oImg, 'transform', 'scaleX(-1)');
Utils.setStyle(oImg, {
position: 'absolute', right: 0, top: 0, width: '200%', height: '100%'
});
//setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY(-90deg)');
Utils.setStyle3(oDivPage, 'transformOrigin', 'left');
}
if(now.y<-90)
{
Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) scale(-1,1) rotateY('+(180-now.y)+'deg)');
}
else
{
Utils.setStyle3(oDivPage, 'transform', 'perspective(1000px) rotateY('+now.y+'deg)');
}
oDivShadow.style.background='rgba(0,0,0,'+now.opacity+')';
}, function (){
now=next();
ready=true;
}, 14);
});
var setStyle3 =function(obj, name, value)
{
obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style[name]=value;
};
var setStyle = function(obj, json){
};
var rnd = function (n, m){
return Math.random()*(m-n)+n;
};
});
var Utils = {
setStyle :function(obj,json){
if(obj.length)
for(var i=0;i<obj.length;i++) Utils.setStyle(obj[i], json);
else
{
if(arguments.length==2)
for(var i in json) obj.style[i]=json[i];
else
obj.style[arguments[1]]=arguments[2];
}
},
setStyle3 : function(obj, name, value){
obj.style['Webkit'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['Moz'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['ms'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style['O'+name.charAt(0).toUpperCase()+name.substring(1)]=value;
obj.style[name]=value;
},
rnd : function(n,m){
return Math.random()*(m-n) + n ;
}
}
</script>
<style>
</style>
</head>
<body >
<div id="div1">
<div id="img"></div>
<div id="btns">
<input id="btn_explode" type="button" value="爆炸" class="btn_01" />
<input id="btn_tile" type="button" value="翻转" class="btn_02" />
<input id="btn_bars" type="button" value="扭曲" class="btn_03" />
<input id="btn_cube" type="button" value="立方体" class="btn_04" />
<input id="btn_turn" type="button" value="翻页" class="btn_05" />
</div>
</div>
<div id="burst">
</div>
</body>
</html>
JS代码(Modernizr.js):
/* Modernizr 2.5.3 (Custom Build) | MIT & BSD * Build:http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexbox_legacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load */
;
window.Modernizr=function(a,b,c){
function C(a){
j.cssText=a}
function D(a,b){
return C(n.join(a+";
")+(b||""))}
function E(a,b){
return typeof a===b}
function F(a,b){
return!!~(""+a).indexOf(b)}
function G(a,b){
for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;
return!1}
function H(a,b,d){
for(var e in a){
var f=b[a[e]];
if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}
return!1}
function I(a,b,c){
var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+p.join(d+" ")+d).split(" ");
return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),H(e,b,c))}
function K(){
e.input=function(c){
for(var d=0,e=c.length;
d<e;
d++)u[c[d]]=c[d]in k;
return u.list&&(u.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),u}
("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){
for(var d=0,e,f,h,i=a.length;
d<i;
d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;
visibility:hidden;
",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:/^color$/.test(f)?(g.appendChild(k),g.offsetWidth,e=k.value!=l,g.removeChild(k)):e=k.value!=l)),t[a[d]]=!!e;
return t}
("search tel url email datetime date month week time datetime-local number range color".split(" "))}
var d="2.5.3",e={
}
,f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={
}
.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={
svg:"http://www.w3.org/2000/svg"}
,s={
}
,t={
}
,u={
}
,v=[],w=v.slice,x,y=function(a,c,d,e){
var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");
if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);
return f=["­
","<style>",a,"</style>"].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i}
,z=function(){
function d(d,e){
e=e||b.createElement(a[d]||"div"),d="on"+d;
var f=d in e;
return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}
var a={
select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"}
;
return d}
(),A={
}
.hasOwnProperty,B;
!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){
return A.call(a,b)}
:B=function(a,b){
return b in a&&E(a.constructor.prototype[b],"undefined")}
,Function.prototype.bind||(Function.prototype.bind=function(b){
var c=this;
if(typeof c!="function")throw new TypeError;
var d=w.call(arguments,1),e=function(){
if(this instanceof e){
var a=function(){
}
;
a.prototype=c.prototype;
var f=new a,g=c.apply(f,d.concat(w.call(arguments)));
return Object(g)===g?g:f}
return c.apply(b,d.concat(w.call(arguments)))}
;
return e}
);
var J=function(c,d){
var f=c.join(""),g=d.length;
y(f,function(c,d){
var f=b.styleSheets[b.styleSheets.length-1],h=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"",i=c.childNodes,j={
}
;
while(g--)j[i[g].id]=i[g];
e.touch="ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch||(j.touch&&j.touch.offsetTop)===9,e.csstransforms3d=(j.csstransforms3d&&j.csstransforms3d.offsetLeft)===9&&j.csstransforms3d.offsetHeight===3,e.generatedcontent=(j.generatedcontent&&j.generatedcontent.offsetHeight)>=1,e.fontface=/src/i.test(h)&&h.indexOf(d.split(" ")[0])===0}
,g,d)}
(['@font-face{
font-family:"font";
src:url("https://")}
',["@media (",n.join("touch-enabled),("),h,")","{
#touch{
top:9px;
position:absolute}
}
"].join(""),["@media (",n.join("transform-3d),("),h,")","{
#csstransforms3d{
left:9px;
position:absolute;
height:3px;
}
}
"].join(""),['#generatedcontent:after{
content:"',l,'";
visibility:hidden}
'].join("")],["fontface","touch","csstransforms3d","generatedcontent"]);
s.flexbox=function(){
return I("flexOrder")}
,s["flexbox-legacy"]=function(){
return I("boxDirection")}
,s.canvas=function(){
var a=b.createElement("canvas");
return!!a.getContext&&!!a.getContext("2d")}
,s.canvastext=function(){
return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")}
,s.webgl=function(){
try{
var d=b.createElement("canvas"),e;
e=!(!a.WebGLRenderingContext||!d.getContext("experimental-webgl")&&!d.getContext("webgl")),d=c}
catch(f){
e=!1}
return e}
,s.touch=function(){
return e.touch}
,s.geolocation=function(){
return!!navigator.geolocation}
,s.postmessage=function(){
return!!a.postMessage}
,s.websqldatabase=function(){
return!!a.openDatabase}
,s.indexedDB=function(){
return!!I("indexedDB",a)}
,s.hashchange=function(){
return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)}
,s.history=function(){
return!!a.history&&!!history.pushState}
,s.draganddrop=function(){
var a=b.createElement("div");
return"draggable"in a||"ondragstart"in a&&"ondrop"in a}
,s.websockets=function(){
for(var b=-1,c=p.length;
++b<c;
)if(a[p[b]+"WebSocket"])return!0;
return"WebSocket"in a}
,s.rgba=function(){
return C("background-color:rgba(150,255,150,.5)"),F(j.backgroundColor,"rgba")}
,s.hsla=function(){
return C("background-color:hsla(120,40%,100%,.5)"),F(j.backgroundColor,"rgba")||F(j.backgroundColor,"hsla")}
,s.multiplebgs=function(){
return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){
3}
/.test(j.background)}
,s.backgroundsize=function(){
return I("backgroundSize")}
,s.borderimage=function(){
return I("borderImage")}
,s.borderradius=function(){
return I("borderRadius")}
,s.boxshadow=function(){
return I("boxShadow")}
,s.textshadow=function(){
return b.createElement("div").style.textShadow===""}
,s.opacity=function(){
return D("opacity:.55"),/^0.55$/.test(j.opacity)}
,s.cssanimations=function(){
return I("animationName")}
,s.csscolumns=function(){
return I("columnCount")}
,s.cssgradients=function(){
var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));
",c="linear-gradient(left top,#9f9,white);
";
return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")}
,s.cssreflections=function(){
return I("boxReflect")}
,s.csstransforms=function(){
return!!I("transform")}
,s.csstransforms3d=function(){
var a=!!I("perspective");
return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a}
,s.csstransitions=function(){
return I("transition")}
,s.fontface=function(){
return e.fontface}
,s.generatedcontent=function(){
return e.generatedcontent}
,s.video=function(){
var a=b.createElement("video"),c=!1;
try{
if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg;
codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4;
codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm;
codecs="vp8,vorbis"').replace(/^no$/,"")}
catch(d){
}
return c}
,s.audio=function(){
var a=b.createElement("audio"),c=!1;
try{
if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg;
codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;
").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav;
codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;
")||a.canPlayType("audio/aac;
")).replace(/^no$/,"")}
catch(d){
}
return c}
,s.localstorage=function(){
try{
return localStorage.setItem(h,h),localStorage.removeItem(h),!0}
catch(a){
return!1}
}
,s.sessionstorage=function(){
try{
return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}
catch(a){
return!1}
}
,s.webworkers=function(){
return!!a.Worker}
,s.applicationcache=function(){
return!!a.applicationCache}
,s.svg=function(){
return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect}
,s.inlinesvg=function(){
var a=b.createElement("div");
return a.innerHTML="<svg/>",(a.firstChild&&a.firstChild.namespaceURI)==r.svg}
,s.smil=function(){
return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))}
,s.svgclippaths=function(){
return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))}
;
for(var L in s)B(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));
return e.input||K(),C(""),i=k=null,function(a,b){
function g(a,b){
var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;
return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}
function h(){
var a=k.elements;
return typeof a=="string"?a.split(" "):a}
function i(a){
var b={
}
,c=a.createElement,e=a.createDocumentFragment,f=e();
a.createElement=function(a){
var e=(b[a]||(b[a]=c(a))).cloneNode();
return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e}
,a.createDocumentFragment=Function("h,f","return function(){
var n=f.cloneNode(),c=n.createElement;
h.shivMethods&&("+h().join().replace(/\w+/g,function(a){
return b[a]=c(a),f.createElement(a),'c("'+a+'")'}
)+");
return n}
")(k,f)}
function j(a){
var b;
return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
display:block}
audio{
display:none}
canvas,video{
display:inline-block;
*display:inline;
*zoom:1}
[hidden]{
display:none}
audio[controls]{
display:inline-block;
*display:inline;
*zoom:1}
mark{
background:#FF0;
color:#000}
")),f||(b=!i(a)),b&&(a.documentShived=b),a)}
var c=a.html5||{
}
,d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;
(function(){
var a=b.createElement("a");
a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){
try{
b.createElement("a")}
catch(a){
return!0}
var c=b.createDocumentFragment();
return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}
()}
)();
var k={
elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j}
;
a.html5=k,j(b)}
(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.hasEvent=z,e.testProp=function(a){
return G([a])}
,e.testAllProps=I,e.testStyles=y,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}
(this,this.document),function(a,b,c){
function d(a){
return o.call(a)=="[object Function]"}
function e(a){
return typeof a=="string"}
function f(){
}
function g(a){
return!a||a=="loaded"||a=="complete"||a=="uninitialized"}
function h(){
var a=p.shift();
q=1,a?a.t?m(function(){
(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)}
,0):(a(),h()):q=0}
function i(a,c,d,e,f,i,j){
function k(b){
if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){
a!="img"&&m(function(){
t.removeChild(l)}
,50);
for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}
}
var j=j||B.errorTimeout,l={
}
,o=0,r=0,u={
t:d,s:c,e:f,a:i,x:j}
;
y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){
k.call(this,r)}
,p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}
function j(a,b,c,d,f){
return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}
function k(){
var a=B;
return a.loader={
load:j,i:0}
,a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){
return o.call(a)=="[object Array]"}
,x=[],y={
}
,z={
timeout:function(a,b){
return b.length&&(a.timeout=b[0]),a}
}
,A,B;
B=function(a){
function b(a){
var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={
url:c,origUrl:c,prefixes:a}
,e,f,g;
for(f=0;
f<d;
f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));
for(f=0;
f<b;
f++)c=x[f](c);
return c}
function g(a,e,f,g,i){
var j=b(a),l=j.autoCallback;
j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){
k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2}
)))}
function i(a,b){
function c(a,c){
if(a){
if(e(a))c||(j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
),g(a,j,b,0,h);
else if(Object(a)===a)for(n in m=function(){
var b=0,c;
for(c in a)a.hasOwnProperty(c)&&b++;
return b}
(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){
var a=[].slice.call(arguments);
k.apply(this,a),l()}
:j[n]=function(a){
return function(){
var b=[].slice.call(arguments);
a&&a.apply(this,b),l()}
}
(k[n])),g(a[n],j,b,n,h))}
else!c&&l()}
var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;
c(h?a.yep:a.nope,!!i),i&&c(i)}
var j,l,m=this.yepnope.loader;
if(e(a))g(a,0,m,0);
else if(w(a))for(j=0;
j<a.length;
j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);
else Object(a)===a&&i(a,m)}
,B.addPrefix=function(a,b){
z[a]=b}
,B.addFilter=function(a){
x.push(a)}
,B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){
b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"}
,0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){
var k=b.createElement("script"),l,o,e=e||B.errorTimeout;
k.src=a;
for(o in d)k.setAttribute(o,d[o]);
c=j?h:c||f,k.onreadystatechange=k.onload=function(){
!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)}
,m(function(){
l||(l=1,c(1))}
,e),i?k.onload():n.parentNode.insertBefore(k,n)}
,a.yepnope.injectCss=function(a,c,d,e,g,i){
var e=b.createElement("link"),j,c=i?h:c||f;
e.href=a,e.rel="stylesheet",e.type="text/css";
for(j in d)e.setAttribute(j,d[j]);
g||(n.parentNode.insertBefore(e,n),m(c,0))}
}
(this,document),Modernizr.load=function(){
yepnope.apply(window,[].slice.call(arguments,0))}
;
CSS代码(base.css):
@charset "utf-8";/* CSS Document */
body{background:#B68F6D overflow:hidden;background-color:#F2F2F2;}
#div1{width:762px;height:452px;background:rgba(255,255,255,0.4);position:absolute;z-index:2;left:50%;top:80px;margin-left:-381px;}
#img{width:700px;height:400px;background:url("../images/1.jpg") center no-repeat;position:absolute;left:31px;top:26px;}
#btns{width:762px;margin:10px auto;text-align:center;position:absolute;z-index:1;border-bottom:10px;bottom:-100px;}
#btns input{width:136px;height:64px;font-size:16px;border-width:0px;}
#burst{background:url("../images/burst.png") no-repeat;width:1500px;height:1500px;background-size:100%;position:absolute;left:50%;top:-420px;z-index:0;margin-left:-750px;}
.btn_01{background-color:#EAEAEA;}
.btn_02{background-color:#EAEAEA;}
.btn_03{background-color:#EAEAEA;}
.btn_04{background-color:#EAEAEA;}
.btn_05{background-color:#EAEAEA;}
body{_background-image:url("../images/noise.png");_background-attachment:fixed;}
.znsCom{width:100%;clear:both;overflow:hidden;position:fixed;top:20px;text-align:center;color:#FFF;font-family:Verdana;_position:absolute;_top:20px;z-index:999;}
.znsCom a{color:#FFF;text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
