以下是 jquery波浪动画导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jQ波浪动画导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>
<script type="text/javascript" src="js/jquery.animate-shadow-min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
</head>
<body>
<div id="menu-wrapper">
<div id="nav">
<div class="menuitem">
<div>
<a href="#section-1">
<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
<img src="images/1.png" alt="1-icon" />
</a>
</div>
</div>
<div class="menuitem">
<div>
<a href="#section-2">
<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
<img src="images/2.png" alt="2-icon" />
</a>
</div>
</div>
<div class="menuitem">
<div>
<a href="#section-3">
<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
<img src="images/3.png" alt="4-icon" />
</a>
</div>
</div>
<div class="menuitem">
<div>
<a href="#section-4">
<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
<img src="images/4.png" alt="3-icon" />
</a>
</div>
</div>
<div class="menuitem">
<div>
<a href="#section-5">
<div class="inner-menu-wrapper"></div><div class="inner-menu-wrapper-inv"></div>
<img src="images/5.png" alt="5-icon" />
</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/gbin1.js"></script>
<script type="text/javascript" src="js/fixie.js"></script>
</body>
</html>
JS代码(cufon-yui.js):
/* * Copyright (c) 2009 Simo Kinnunen. * Licensed under the MIT license. * * @version 1.09i */
var Cufon=(function(){
var m=function(){
return m.replace.apply(null,arguments)}
;
var x=m.DOM={
ready:(function(){
var C=false,E={
loaded:1,complete:1}
;
var B=[],D=function(){
if(C){
return}
C=true;
for(var F;
F=B.shift();
F()){
}
}
;
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",D,false);
window.addEventListener("pageshow",D,false)}
if(!window.opera&&document.readyState){
(function(){
E[document.readyState]?D():setTimeout(arguments.callee,10)}
)()}
if(document.readyState&&document.createStyleSheet){
(function(){
try{
document.body.doScroll("left");
D()}
catch(F){
setTimeout(arguments.callee,1)}
}
)()}
q(window,"load",D);
return function(F){
if(!arguments.length){
D()}
else{
C?F():B.push(F)}
}
}
)(),root:function(){
return document.documentElement||document.body}
}
;
var n=m.CSS={
Size:function(C,B){
this.value=parseFloat(C);
this.unit=String(C).match(/[a-z%]*$/)[0]||"px";
this.convert=function(D){
return D/B*this.value}
;
this.convertFrom=function(D){
return D/this.value*B}
;
this.toString=function(){
return this.value+this.unit}
}
,addClass:function(C,B){
var D=C.className;
C.className=D+(D&&" ")+B;
return C}
,color:j(function(C){
var B={
}
;
B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){
B.opacity=parseFloat(F);
return"rgb("+D+")"}
);
return B}
),fontStretch:j(function(B){
if(typeof B=="number"){
return B}
if(/%$/.test(B)){
return parseFloat(B)/100}
return{
"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}
[B]||1}
),getStyle:function(C){
var B=document.defaultView;
if(B&&B.getComputedStyle){
return new a(B.getComputedStyle(C,null))}
if(C.currentStyle){
return new a(C.currentStyle)}
return new a(C.style)}
,gradient:j(function(F){
var G={
id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]}
,C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);
for(var E=0,B=C.length,D;
E<B;
++E){
D=C[E].split("=",2).reverse();
G.stops.push([D[1]||E/(B-1),D[0]])}
return G}
),quotedList:j(function(E){
var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/
g,B;
while(B=C.exec(E)){
D.push(B[3]||B[1])}
return D}
),recognizesMedia:j(function(G){
var E=document.createElement("style"),D,C,B;
E.type="text/css";
E.media=G;
try{
E.appendChild(document.createTextNode("/**/
"))}
catch(F){
}
C=g("head")[0];
C.insertBefore(E,C.firstChild);
D=(E.sheet||E.styleSheet);
B=D&&!D.disabled;
C.removeChild(E);
return B}
),removeClass:function(D,C){
var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");
D.className=D.className.replace(B,"");
return D}
,supports:function(D,C){
var B=document.createElement("span").style;
if(B[D]===undefined){
return false}
B[D]=C;
return B[D]===C}
,textAlign:function(E,D,B,C){
if(D.get("textAlign")=="right"){
if(B>0){
E=" "+E}
}
else{
if(B<C-1){
E+=" "}
}
return E}
,textShadow:j(function(F){
if(F=="none"){
return null}
var E=[],G={
}
,B,C=0;
var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;
while(B=D.exec(F)){
if(B[0]==","){
E.push(G);
G={
}
;
C=0}
else{
if(B[1]){
G.color=B[1]}
else{
G[["offX","offY","blur"][C++]]=B[2]}
}
}
E.push(G);
return E}
),textTransform:(function(){
var B={
uppercase:function(C){
return C.toUpperCase()}
,lowercase:function(C){
return C.toLowerCase()}
,capitalize:function(C){
return C.replace(/\b./g,function(D){
return D.toUpperCase()}
)}
}
;
return function(E,D){
var C=B[D.get("textTransform")];
return C?C(E):E}
}
)(),whiteSpace:(function(){
var D={
inline:1,"inline-block":1,"run-in":1}
;
var C=/^\s+/,B=/\s+$/;
return function(H,F,G,E){
if(E){
if(E.nodeName.toLowerCase()=="br"){
H=H.replace(C,"")}
}
if(D[F.get("display")]){
return H}
if(!G.previousSibling){
H=H.replace(C,"")}
if(!G.nextSibling){
H=H.replace(B,"")}
return H}
}
)()}
;
n.ready=(function(){
var B=!n.recognizesMedia("all"),E=false;
var D=[],H=function(){
B=true;
for(var K;
K=D.shift();
K()){
}
}
;
var I=g("link"),J=g("style");
function C(K){
return K.disabled||G(K.sheet,K.media||"screen")}
function G(M,P){
if(!n.recognizesMedia(P||"all")){
return true}
if(!M||M.disabled){
return false}
try{
var Q=M.cssRules,O;
if(Q){
search:for(var L=0,K=Q.length;
O=Q[L],L<K;
++L){
switch(O.type){
case 2:break;
case 3:if(!G(O.styleSheet,O.media.mediaText)){
return false}
break;
default:break search}
}
}
}
catch(N){
}
return true}
function F(){
if(document.createStyleSheet){
return true}
var L,K;
for(K=0;
L=I[K];
++K){
if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){
return false}
}
for(K=0;
L=J[K];
++K){
if(!C(L)){
return false}
}
return true}
x.ready(function(){
if(!E){
E=n.getStyle(document.body).isUsable()}
if(B||(E&&F())){
H()}
else{
setTimeout(arguments.callee,10)}
}
);
return function(K){
if(B){
K()}
else{
D.push(K)}
}
}
)();
function s(D){
var C=this.face=D.face,B={
"\u0020":1,"\u00a0":1,"\u3000":1}
;
this.glyphs=D.glyphs;
this.w=D.w;
this.baseSize=parseInt(C["units-per-em"],10);
this.family=C["font-family"].toLowerCase();
this.weight=C["font-weight"];
this.style=C["font-style"]||"normal";
this.viewBox=(function(){
var F=C.bbox.split(/\s+/);
var E={
minX:parseInt(F[0],10),minY:parseInt(F[1],10),maxX:parseInt(F[2],10),maxY:parseInt(F[3],10)}
;
E.width=E.maxX-E.minX;
E.height=E.maxY-E.minY;
E.toString=function(){
return[this.minX,this.minY,this.width,this.height].join(" ")}
;
return E}
)();
this.ascent=-parseInt(C.ascent,10);
this.descent=-parseInt(C.descent,10);
this.height=-this.ascent+this.descent;
this.spacing=function(L,N,E){
var O=this.glyphs,M,K,G,P=[],F=0,J=-1,I=-1,H;
while(H=L[++J]){
M=O[H]||this.missingGlyph;
if(!M){
continue}
if(K){
F-=G=K[H]||0;
P[I]-=G}
F+=P[++I]=~~(M.w||this.w)+N+(B[H]?E:0);
K=M.k}
P.total=F;
return P}
}
function f(){
var C={
}
,B={
oblique:"italic",italic:"oblique"}
;
this.add=function(D){
(C[D.style]||(C[D.style]={
}
))[D.weight]=D}
;
this.get=function(H,I){
var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;
if(!G){
return null}
I={
normal:400,bold:700}
[I]||parseInt(I,10);
if(G[I]){
return G[I]}
var E={
1:1,99:0}
[I%100],K=[],F,D;
if(E===undefined){
E=I>400}
if(I==500){
I=400}
for(var J in G){
if(!k(G,J)){
continue}
J=parseInt(J,10);
if(!F||J<F){
F=J}
if(!D||J>D){
D=J}
K.push(J)}
if(I<F){
I=F}
if(I>D){
I=D}
K.sort(function(M,L){
return(E?(M>=I&&L>=I)?M<L:M>L:(M<=I&&L<=I)?M>L:M<L)?-1:1}
);
return G[K[0]]}
}
function r(){
function D(F,G){
if(F.contains){
return F.contains(G)}
return F.compareDocumentPosition(G)&16}
function B(G){
var F=G.relatedTarget;
if(!F||D(this,F)){
return}
C(this,G.type=="mouseover")}
function E(F){
C(this,F.type=="mouseenter")}
function C(F,G){
setTimeout(function(){
var H=d.get(F).options;
m.replace(F,G?h(H,H.hover):H,true)}
,10)}
this.attach=function(F){
if(F.onmouseenter===undefined){
q(F,"mouseover",B);
q(F,"mouseout",B)}
else{
q(F,"mouseenter",E);
q(F,"mouseleave",E)}
}
}
function u(){
var C=[],D={
}
;
function B(H){
var E=[],G;
for(var F=0;
G=H[F];
++F){
E[F]=C[D[G]]}
return E}
this.add=function(F,E){
D[F]=C.push(E)-1}
;
this.repeat=function(){
var E=arguments.length?B(arguments):C,F;
for(var G=0;
F=E[G++];
){
m.replace(F[0],F[1],true)}
}
}
function A(){
var D={
}
,B=0;
function C(E){
return E.cufid||(E.cufid=++B)}
this.get=function(E){
var F=C(E);
return D[F]||(D[F]={
}
)}
}
function a(B){
var D={
}
,C={
}
;
this.extend=function(E){
for(var F in E){
if(k(E,F)){
D[F]=E[F]}
}
return this}
;
this.get=function(E){
return D[E]!=undefined?D[E]:B[E]}
;
this.getSize=function(F,E){
return C[F]||(C[F]=new n.Size(this.get(F),E))}
;
this.isUsable=function(){
return !!B}
}
function q(C,B,D){
if(C.addEventListener){
C.addEventListener(B,D,false)}
else{
if(C.attachEvent){
C.attachEvent("on"+B,function(){
return D.call(C,window.event)}
)}
}
}
function v(C,B){
var D=d.get(C);
if(D.options){
return C}
if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){
b.attach(C)}
D.options=B;
return C}
function j(B){
var C={
}
;
return function(D){
if(!k(C,D)){
C[D]=B.apply(null,arguments)}
return C[D]}
}
function c(F,E){
var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;
for(var C=0;
D=B[C];
++C){
if(i[D]){
return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}
}
return null}
function g(B){
return document.getElementsByTagName(B)}
function k(C,B){
return C.hasOwnProperty(B)}
function h(){
var C={
}
,B,F;
for(var E=0,D=arguments.length;
B=arguments[E],E<D;
++E){
for(F in B){
if(k(B,F)){
C[F]=B[F]}
}
}
return C}
function o(E,M,C,N,F,D){
var K=document.createDocumentFragment(),H;
if(M===""){
return K}
var L=N.separate;
var I=M.split(p[L]),B=(L=="words");
if(B&&t){
if(/^\s/.test(M)){
I.unshift("")}
if(/\s$/.test(M)){
I.push("")}
}
for(var J=0,G=I.length;
J<G;
++J){
H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);
if(H){
K.appendChild(H)}
}
return K}
function l(D,M){
var C=D.nodeName.toLowerCase();
if(M.ignore[C]){
return}
var E=!M.textless[C];
var B=n.getStyle(v(D,M)).extend(M);
var F=c(D,B),G,K,I,H,L,J;
if(!F){
return}
for(G=D.firstChild;
G;
G=I){
K=G.nodeType;
I=G.nextSibling;
if(E&&K==3){
if(H){
H.appendData(G.data);
D.removeChild(G)}
else{
H=G}
if(I){
continue}
}
if(H){
D.replaceChild(o(F,n.whiteSpace(H.data,B,H,J),B,M,G,D),H);
H=null}
if(K==1){
if(G.firstChild){
if(G.nodeName.toLowerCase()=="cufon"){
z[M.engine](F,null,B,M,G,D)}
else{
arguments.callee(G,M)}
}
J=G}
}
}
var t=" ".split(/\s+/).length==0;
var d=new A();
var b=new r();
var y=new u();
var e=false;
var z={
}
,i={
}
,w={
autoDetect:false,engine:null,forceHitArea:false,hover:false,hoverables:{
a:true}
,ignore:{
applet:1,canvas:1,col:1,colgroup:1,head:1,iframe:1,map:1,optgroup:1,option:1,script:1,select:1,style:1,textarea:1,title:1,pre:1}
,printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){
return jQuery(B)}
)||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.YAHOO&&YAHOO.util&&YAHOO.util.Selector&&YAHOO.util.Selector.query)||(window.$$&&function(B){
return $$(B)}
)||(window.$&&function(B){
return $(B)}
)||(document.querySelectorAll&&function(B){
return document.querySelectorAll(B)}
)||g),separate:"words",textless:{
dl:1,html:1,ol:1,table:1,tbody:1,thead:1,tfoot:1,tr:1,ul:1}
,textShadow:"none"}
;
var p={
words:/\s/.test("\u00a0")?/[^\S\u00a0]+/:/\s+/,characters:"",none:/^/}
;
m.now=function(){
x.ready();
return m}
;
m.refresh=function(){
y.repeat.apply(y,arguments);
return m}
;
m.registerEngine=function(C,B){
if(!B){
return m}
z[C]=B;
return m.set("engine",C)}
;
m.registerFont=function(D){
if(!D){
return m}
var B=new s(D),C=B.family;
if(!i[C]){
i[C]=new f()}
i[C].add(B);
return m.set("fontFamily",'"'+C+'"')}
;
m.replace=function(D,C,B){
C=h(w,C);
if(!C.engine){
return m}
if(!e){
n.addClass(x.root(),"cufon-active cufon-loading");
n.ready(function(){
n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")}
);
e=true}
if(C.hover){
C.forceHitArea=true}
if(C.autoDetect){
delete C.fontFamily}
if(typeof C.textShadow=="string"){
C.textShadow=n.textShadow(C.textShadow)}
if(typeof C.color=="string"&&/^-/.test(C.color)){
C.textGradient=n.gradient(C.color)}
else{
delete C.textGradient}
if(!B){
y.add(D,arguments)}
if(D.nodeType||typeof D=="string"){
D=[D]}
n.ready(function(){
for(var F=0,E=D.length;
F<E;
++F){
var G=D[F];
if(typeof G=="string"){
m.replace(C.selector(G),C,true)}
else{
l(G,C)}
}
}
);
return m}
;
m.set=function(B,C){
w[B]=C;
return m}
;
return m}
)();
Cufon.registerEngine("vml",(function(){
var e=document.namespaces;
if(!e){
return}
e.add("cvml","urn:schemas-microsoft-com:vml");
e=null;
var b=document.createElement("cvml:shape");
b.style.behavior="url(#default#VML)";
if(!b.coordsize){
return}
b=null;
var h=(document.documentMode||0)<8;
document.write(('<style type="text/css">cufoncanvas{
text-indent:0;
}
@media screen{
cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{
behavior:url(#default#VML);
display:block;
antialias:true;
position:absolute;
}
cufoncanvas{
position:absolute;
text-align:left;
}
cufon{
display:inline-block;
position:relative;
vertical-align:'+(h?"middle":"text-bottom")+";
}
cufon cufontext{
position:absolute;
left:-10000in;
font-size:1px;
}
a cufon{
cursor:pointer}
}
@media print{
cufon cufoncanvas{
display:none;
}
}
</style>").replace(/;
/g,"!important;
"));
function c(i,j){
return a(i,/(?:em|ex|%)$|^[a-z-]+$/i.test(j)?"1em":j)}
function a(l,m){
if(m==="0"){
return 0}
if(/px$/i.test(m)){
return parseFloat(m)}
var k=l.style.left,j=l.runtimeStyle.left;
l.runtimeStyle.left=l.currentStyle.left;
l.style.left=m.replace("%","em");
var i=l.style.pixelLeft;
l.style.left=k;
l.runtimeStyle.left=j;
return i}
function f(l,k,j,n){
var i="computed"+n,m=k[i];
if(isNaN(m)){
m=k.get(n);
k[i]=m=(m=="normal")?0:~~j.convertFrom(a(l,m))}
return m}
var g={
}
;
function d(p){
var q=p.id;
if(!g[q]){
var n=p.stops,o=document.createElement("cvml:fill"),i=[];
o.type="gradient";
o.angle=180;
o.focus="0";
o.method="sigma";
o.color=n[0][1];
for(var m=1,l=n.length-1;
m<l;
++m){
i.push(n[m][0]*100+"% "+n[m][1])}
o.colors=i.join(",");
o.color2=n[l][1];
g[q]=o}
return g[q]}
return function(ac,G,Y,C,K,ad,W){
var n=(G===null);
if(n){
G=K.alt}
var I=ac.viewBox;
var p=Y.computedFontSize||(Y.computedFontSize=new Cufon.CSS.Size(c(ad,Y.get("fontSize"))+"px",ac.baseSize));
var y,q;
if(n){
y=K;
q=K.firstChild}
else{
y=document.createElement("cufon");
y.className="cufon cufon-vml";
y.alt=G;
q=document.createElement("cufoncanvas");
y.appendChild(q);
if(C.printable){
var Z=document.createElement("cufontext");
Z.appendChild(document.createTextNode(G));
y.appendChild(Z)}
if(!W){
y.appendChild(document.createElement("cvml:shape"))}
}
var ai=y.style;
var R=q.style;
var l=p.convert(I.height),af=Math.ceil(l);
var V=af/l;
var P=V*Cufon.CSS.fontStretch(Y.get("fontStretch"));
var U=I.minX,T=I.minY;
R.height=af;
R.top=Math.round(p.convert(T-ac.ascent));
R.left=Math.round(p.convert(U));
ai.height=p.convert(ac.height)+"px";
var F=Y.get("color");
var ag=Cufon.CSS.textTransform(G,Y).split("");
var L=ac.spacing(ag,f(ad,Y,p,"letterSpacing"),f(ad,Y,p,"wordSpacing"));
if(!L.length){
return null}
var k=L.total;
var x=-U+k+(I.width-L[L.length-1]);
var ah=p.convert(x*P),X=Math.round(ah);
var O=x+","+I.height,m;
var J="r"+O+"ns";
var u=C.textGradient&&d(C.textGradient);
var o=ac.glyphs,S=0;
var H=C.textShadow;
var ab=-1,aa=0,w;
while(w=ag[++ab]){
var D=o[ag[ab]]||ac.missingGlyph,v;
if(!D){
continue}
if(n){
v=q.childNodes[aa];
while(v.firstChild){
v.removeChild(v.firstChild)}
}
else{
v=document.createElement("cvml:shape");
q.appendChild(v)}
v.stroked="f";
v.coordsize=O;
v.coordorigin=m=(U-S)+","+T;
v.path=(D.d?"m"+D.d+"xe":"")+"m"+m+J;
v.fillcolor=F;
if(u){
v.appendChild(u.cloneNode(false))}
var ae=v.style;
ae.width=X;
ae.height=af;
if(H){
var s=H[0],r=H[1];
var B=Cufon.CSS.color(s.color),z;
var N=document.createElement("cvml:shadow");
N.on="t";
N.color=B.color;
N.offset=s.offX+","+s.offY;
if(r){
z=Cufon.CSS.color(r.color);
N.type="double";
N.color2=z.color;
N.offset2=r.offX+","+r.offY}
N.opacity=B.opacity||(z&&z.opacity)||1;
v.appendChild(N)}
S+=L[aa++]}
var M=v.nextSibling,t,A;
if(C.forceHitArea){
if(!M){
M=document.createElement("cvml:rect");
M.stroked="f";
M.className="cufon-vml-cover";
t=document.createElement("cvml:fill");
t.opacity=0;
M.appendChild(t);
q.appendChild(M)}
A=M.style;
A.width=X;
A.height=af}
else{
if(M){
q.removeChild(M)}
}
ai.width=Math.max(Math.ceil(p.convert(k*P)),0);
if(h){
var Q=Y.computedYAdjust;
if(Q===undefined){
var E=Y.get("lineHeight");
if(E=="normal"){
E="1em"}
else{
if(!isNaN(E)){
E+="em"}
}
Y.computedYAdjust=Q=0.5*(a(ad,E)-parseFloat(ai.height))}
if(Q){
ai.marginTop=Math.ceil(Q)+"px";
ai.marginBottom=Q+"px"}
}
return y}
}
)());
Cufon.registerEngine("canvas",(function(){
var b=document.createElement("canvas");
if(!b||!b.getContext||!b.getContext.apply){
return}
b=null;
var a=Cufon.CSS.supports("display","inline-block");
var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));
var f=document.createElement("style");
f.type="text/css";
f.appendChild(document.createTextNode(("cufon{
text-indent:0;
}
@media screen,projection{
cufon{
display:inline;
display:inline-block;
position:relative;
vertical-align:middle;
"+(e?"":"font-size:1px;
line-height:1px;
")+"}
cufon cufontext{
display:-moz-inline-box;
display:inline-block;
width:0;
height:0;
overflow:hidden;
text-indent:-10000in;
}
"+(a?"cufon canvas{
position:relative;
}
":"cufon canvas{
position:absolute;
}
")+"}
@media print{
cufon{
padding:0;
}
cufon canvas{
display:none;
}
}
").replace(/;
/g,"!important;
")));
document.getElementsByTagName("head")[0].appendChild(f);
function d(p,h){
var n=0,m=0;
var g=[],o=/([mrvxe])([^a-z]*)/g,k;
generate:for(var j=0;
k=o.exec(p);
++j){
var l=k[2].split(",");
switch(k[1]){
case"v":g[j]={
m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]}
;
break;
case"r":g[j]={
m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]}
;
break;
case"m":g[j]={
m:"moveTo",a:[n=~~l[0],m=~~l[1]]}
;
break;
case"x":g[j]={
m:"closePath"}
;
break;
case"e":break generate}
h[g[j].m].apply(h,g[j].a)}
return g}
function c(m,k){
for(var j=0,h=m.length;
j<h;
++j){
var g=m[j];
k[g.m].apply(k,g.a)}
}
return function(V,w,P,t,C,W){
var k=(w===null);
if(k){
w=C.getAttribute("alt")}
var A=V.viewBox;
var m=P.getSize("fontSize",V.baseSize);
var B=0,O=0,N=0,u=0;
var z=t.textShadow,L=[];
if(z){
for(var U=z.length;
U--;
){
var F=z[U];
var K=m.convertFrom(parseFloat(F.offX));
var I=m.convertFrom(parseFloat(F.offY));
L[U]=[K,I];
if(I<B){
B=I}
if(K>O){
O=K}
if(I>N){
N=I}
if(K<u){
u=K}
}
}
var Z=Cufon.CSS.textTransform(w,P).split("");
var E=V.spacing(Z,~~m.convertFrom(parseFloat(P.get("letterSpacing"))||0),~~m.convertFrom(parseFloat(P.get("wordSpacing"))||0));
if(!E.length){
return null}
var h=E.total;
O+=A.width-E[E.length-1];
u+=A.minX;
var s,n;
if(k){
s=C;
n=C.firstChild}
else{
s=document.createElement("cufon");
s.className="cufon cufon-canvas";
s.setAttribute("alt",w);
n=document.createElement("canvas");
s.appendChild(n);
if(t.printable){
var S=document.createElement("cufontext");
S.appendChild(document.createTextNode(w));
s.appendChild(S)}
}
var aa=s.style;
var H=n.style;
var j=m.convert(A.height);
var Y=Math.ceil(j);
var M=Y/j;
var G=M*Cufon.CSS.fontStretch(P.get("fontStretch"));
var J=h*G;
var Q=Math.ceil(m.convert(J+O-u));
var o=Math.ceil(m.convert(A.height-B+N));
n.width=Q;
n.height=o;
H.width=Q+"px";
H.height=o+"px";
B+=A.minY;
H.top=Math.round(m.convert(B-V.ascent))+"px";
H.left=Math.round(m.convert(u))+"px";
var r=Math.max(Math.ceil(m.convert(J)),0)+"px";
if(a){
aa.width=r;
aa.height=m.convert(V.height)+"px"}
else{
aa.paddingLeft=r;
aa.paddingBottom=(m.convert(V.height)-1)+"px"}
var X=n.getContext("2d"),D=j/A.height;
X.scale(D,D*M);
X.translate(-u,-B);
X.save();
function T(){
var x=V.glyphs,ab,l=-1,g=-1,y;
X.scale(G,1);
while(y=Z[++l]){
var ab=x[Z[l]]||V.missingGlyph;
if(!ab){
continue}
if(ab.d){
X.beginPath();
if(ab.code){
c(ab.code,X)}
else{
ab.code=d("m"+ab.d,X)}
X.fill()}
X.translate(E[++g],0)}
X.restore()}
if(z){
for(var U=z.length;
U--;
){
var F=z[U];
X.save();
X.fillStyle=F.color;
X.translate.apply(X,L[U]);
T()}
}
var q=t.textGradient;
if(q){
var v=q.stops,p=X.createLinearGradient(0,A.minY,0,A.maxY);
for(var U=0,R=v.length;
U<R;
++U){
p.addColorStop.apply(p,v[U])}
X.fillStyle=p}
else{
X.fillStyle=P.get("color")}
T();
return s}
}
)());
JS代码(jquery.scrollTo.js):
/** * jQuery.ScrollTo - Easy element scrolling using jQuery. * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com * Dual licensed under MIT and GPL. * Date:5/25/2009 * @author Ariel Flesler * @version 1.4.2 * * http://flesler.blogspot.com/2007/10/jqueryscrollto.html */
;
(function(d){
var k=d.scrollTo=function(a,i,e){
d(window).scrollTo(a,i,e)}
;
k.defaults={
axis:'xy',duration:parseFloat(d.fn.jquery)>=1.3?0:1}
;
k.window=function(a){
return d(window)._scrollable()}
;
d.fn._scrollable=function(){
return this.map(function(){
var a=this,i=!a.nodeName||d.inArray(a.nodeName.toLowerCase(),['iframe','#document','html','body'])!=-1;
if(!i)return a;
var e=(a.contentWindow||a).document||a.ownerDocument||a;
return d.browser.safari||e.compatMode=='BackCompat'?e.body:e.documentElement}
)}
;
d.fn.scrollTo=function(n,j,b){
if(typeof j=='object'){
b=j;
j=0}
if(typeof b=='function')b={
onAfter:b}
;
if(n=='max')n=9e9;
b=d.extend({
}
,k.defaults,b);
j=j||b.speed||b.duration;
b.queue=b.queue&&b.axis.length>1;
if(b.queue)j/=2;
b.offset=p(b.offset);
b.over=p(b.over);
return this._scrollable().each(function(){
var q=this,r=d(q),f=n,s,g={
}
,u=r.is('html,body');
switch(typeof f){
case'number':case'string':if(/^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(f)){
f=p(f);
break}
f=d(f,this);
case'object':if(f.is||f.style)s=(f=d(f)).offset()}
d.each(b.axis.split(''),function(a,i){
var e=i=='x'?'Left':'Top',h=e.toLowerCase(),c='scroll'+e,l=q[c],m=k.max(q,i);
if(s){
g[c]=s[h]+(u?0:l-r.offset()[h]);
if(b.margin){
g[c]-=parseInt(f.css('margin'+e))||0;
g[c]-=parseInt(f.css('border'+e+'Width'))||0}
g[c]+=b.offset[h]||0;
if(b.over[h])g[c]+=f[i=='x'?'width':'height']()*b.over[h]}
else{
var o=f[h];
g[c]=o.slice&&o.slice(-1)=='%'?parseFloat(o)/100*m:o}
if(/^\d+$/.test(g[c]))g[c]=g[c]<=0?0:Math.min(g[c],m);
if(!a&&b.queue){
if(l!=g[c])t(b.onAfterFirst);
delete g[c]}
}
);
t(b.onAfter);
function t(a){
r.animate(g,j,b.easing,a&&function(){
a.call(this,n,b)}
)}
}
).end()}
;
k.max=function(a,i){
var e=i=='x'?'Width':'Height',h='scroll'+e;
if(!d(a).is('html,body'))return a[h]-d(a)[e.toLowerCase()]();
var c='client'+e,l=a.ownerDocument.documentElement,m=a.ownerDocument.body;
return Math.max(l[h],m[h])-Math.min(l[c],m[c])}
;
function p(a){
return typeof a=='object'?a:{
top:a,left:a}
}
}
)(jQuery);
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
html{background:none;text-align:left;}
body{width:100%;background:#111111 url(bg.png) repeat;font-family:Tahoma,Geneva,sans-serif;font-size:13px;padding:0;margin:0;color:#999999;line-height:1.6em;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
div#wrapper{margin:0px;}
div.logo{text-align:right;display:block;position:relative;z-index:9;margin-top:0px;}
div#menu-wrapper{width:1200px;padding:0px 10px;margin:0 auto;}
#nav{float:left;margin:20px auto 30px auto;width:200px;position:fixed;}
#content{float:right;width:1000px;}
#content .navitem{font-size:48px;border-bottom:1px solid #505050;padding:30px 10px;text-shadow:1px 1px 20px #505050;}
#content img{margin:10px;border-radius:5px;box-shadow:1px 1px 15px #CCC;}
div#menu-wrapper div.menuitem{z-index:1;position:relative;top:0px;left:0px;height:150px;background:#303030;overflow:hidden;border-radius:5px;float:left;width:150px;margin:10px;box-shadow:1px 1px 15px #303030;}
div#menu-wrapper div.menuitem>div{border-radius:5px;height:100%;width:100%;display:block;}
div#menu-wrapper div.menuitem img{opacity:0.8;position:absolute;top:50%;left:50%;margin:-55px 0 0 -60px;z-index:0;}
div#menu-wrapper div.menuitem img:hover{cursor:pointer;}
div.inner-menu-wrapper{width:100%;height:100%;position:absolute;top:0px;left:0px;display:block;background:url(light.png) 0px -120px no-repeat;cursor:pointer;opacity:0;border-radius:5px;}
div.inner-menu-wrapper-inv{width:100%;height:100%;position:absolute;top:0px;left:0px;opacity:0;display:block;background:url(light.png) -200px -130px no-repeat;cursor:pointer;box-shadow:1px 1px 0px rgba(255,255,255,0.1) inset,-1px -1px 0px rgba(255,255,255,0.1) inset,0px 0px 60px #000000 inset;border-radius:5px;}
分享到QQ
分享到微博
微信扫一扫
