以下是 jQuery+CSS3动态发光相册效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<html>
<head>
<title>����jQuery��CSS3�Ķ�̬����Ч�����</title>
<link rel="stylesheet" type="text/css" href="styles.css"></link>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="fonts/aura_400.font.js"></script>
<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
/*Your ShineTime Welcome Image*/
var default_image = 'images/large/default.jpg';
var default_caption = 'Welcome to ShineTime';
/*Load The Default Image*/
loadPhoto(default_image, default_caption);
function loadPhoto($url, $caption)
{
/*Image pre-loader*/
showPreloader();
var img = new Image();
jQuery(img).load( function()
{
jQuery(img).hide();
hidePreloader();
}).attr({ "src": $url });
$('#largephoto').css('background-image','url("' + $url + '")');
$('#largephoto').data('caption', $caption);
}
/* When a thumbnail is clicked*/
$('.thumb_container').click(function()
{
var handler = $(this).find('.large_image');
var newsrc = handler.attr('src');
var newcaption = handler.attr('rel');
loadPhoto(newsrc, newcaption);
});
/*When the main photo is hovered over*/
$('#largephoto').hover(function()
{
var currentCaption = ($(this).data('caption'));
var largeCaption = $(this).find('#largecaption');
largeCaption.stop();
largeCaption.css('opacity','0.9');
largeCaption.find('.captionContent').html(currentCaption);
largeCaption.fadeIn()
largeCaption.find('.captionShine').stop();
largeCaption.find('.captionShine').css("background-position","-550px 0");
largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700);
Cufon.replace('.captionContent');
},
function()
{
var largeCaption = $(this).find('#largecaption');
largeCaption.find('.captionContent').html('');
largeCaption.fadeOut();
});
/* When a thumbnail is hovered over*/
$('.thumb_container').hover(function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200);
$(this).find(".large_thumb_shine").stop();
$(this).find(".large_thumb_shine").css("background-position","-99px 0");
$(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700);
}, function()
{
$(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200);
});
function showPreloader()
{
$('#loader').css('background-image','url("images/interface/loader.gif")');
}
function hidePreloader()
{
$('#loader').css('background-image','url("")');
}
});
</script>
<div id="container">
<div id="containertitle">
Welcome to W3CFuns
</div>
<div class="mainframe">
<div id="largephoto">
<div id="loader"></div>
<div id="largecaption">
<div class="captionShine"></div>
<div class="captionContent"></div>
</div>
<div id="largetrans">
</div>
</div>
</div>
<div class="thumbnails">
<br><br><br>
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample1.jpg" class="large_image" rel="Just because I can't code, doesn't mean I can't kick your ass!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample2.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample2.jpg" class="large_image" rel="Kick-Ass Is In Theatres Everywhere Now" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample3.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample3.jpg" class="large_image" rel="I can't see through walls, but I can still kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample4.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample4.jpg" class="large_image" rel="I won't bite, I promise!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample5.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample5.jpg" class="large_image" rel="Using swords to open up that ketchup bottle may not have been the best idea.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample6.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample6.jpg" class="large_image" rel="We're going to..wait for it..kick your ass!" />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample7.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample7.jpg" class="large_image" rel="I can't be invisible, but I can kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample8.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample8.jpg" class="large_image" rel="Dave Lizewski is a man in a green costume. He is Kick-Ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample9.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample9.jpg" class="large_image" rel="I probably shouldn't have yelled 'surprise' wearing this costume.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample10.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample10.jpg" class="large_image" rel="I can't read your mind, but I can kick your ass." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample11.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample11.jpg" class="large_image" rel="I love that indented text effect up there. Not bad.." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample12.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample12.jpg" class="large_image" rel="I got your a present. It's an Ass-Kicking." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample13.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample13.jpg" class="large_image" rel="You don't have to be super to be a hero." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample15.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample15.jpg" class="large_image" rel="We Can Kick Ass - Anytime, Anyday." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
<!--end entry-->
<!-- start entry-->
<div class="thumbnailimage">
<div class="thumb_container">
<div class="large_thumb">
<img src="images/thumbnails/sample14.jpg" class="large_thumb_image" alt="thumb" />
<img src="images/large/sample14.jpg" class="large_image" rel="You know..I had this look first. Batman copied ME." />
<div class="large_thumb_border"></div>
<div class="large_thumb_shine"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(cufon-yui.js):
/* * Copyright (c) 2009 Simo Kinnunen. * Licensed under the MIT license. * * @version 1.09 */
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("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}
}
)());
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}
}
)());
JS代码(pngfix.js):
/*Correctly handle PNG transparency in Win IE 5.5 & 6.http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.Use in <HEAD> with DEFER keyword wrapped in conditional comments:<!--[if lt IE 7]><script defer type="text/javascript" src="pngfix.js"></script><![endif]-->*/
var arVersion = navigator.appVersion.split("MSIE")var version = parseFloat(arVersion[1])if ((version >= 5.5) && (document.body.filters)){
for(var i=0;
i<document.images.length;
i++){
var img = document.images[i] var imgName = img.src.toUpperCase() if (imgName.substring(imgName.length-3,imgName.length) == "PNG"){
var imgID = (img.id) ? "id='" + img.id + "' ":"" var imgClass = (img.className) ? "class='" + img.className + "' ":"" var imgTitle = (img.title) ? "title='" + img.title + "' ":"title='" + img.alt + "' " var imgStyle = "display:inline-block;
" + img.style.cssText if (img.align == "left") imgStyle = "float:left;
" + imgStyle if (img.align == "right") imgStyle = "float:right;
" + imgStyle if (img.parentElement.href) imgStyle = "cursor:hand;
" + imgStyle var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px;
height:" + img.height + "px;
" + imgStyle + ";
" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src=\'" + img.src + "\',sizingMethod='scale');
\"></span>" img.outerHTML = strNewHTML i = i-1}
}
}
CSS代码(styles.css):
body{background-color:#333;margin:0 auto;background-image:url('images/interface/bgnoise.png');}
#container{width:793px;height:498px;margin:0 auto;background-image:url('images/interface/back_noise.png');background-color:#111;margin-top:40px;}
#container .mainframe{width:500px;height:498px;float:left}
#container .thumbnails{float:left;width:293px;height:498px;background-repeat:no-repeat;background-image:url('images/interface/total_grid.png');background-position:9px 70px;}
.thumbnailimage{float:left;padding:7px;}
.large_thumb{float:left;position:relative;width:64px;height:64px;padding:0px 10px 0px 0;}
img.large_thumb_image{position:absolute;left:5px;top:4px;}
.large_thumb_border{width:64px;height:64px;background:url('images/interface/thumb_border.png');position:absolute;}
.large_thumb_shine{width:54px;height:54px;background:url('images/interface/shine.png');position:absolute;background-position:-150px 0;left:5px;top:4px;background-repeat:no-repeat;}
.thumb_container{width:64px;height:64px;background-image:url('images/interface/thumb_holder.png');}
#largephoto{width:444px;height:370px;background-color:#333333;margin-top:68px;margin-left:40px;-moz-border-radius:10px;-webkit-border-radius:10px;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #fff;}
#largetrans{width:444px;height:370px;background-image:url('images/interface/main_bg_trans.png');-moz-border-radius:10px;-webkit-border-radius:10px;}
.large_image{display:none}
#containertitle{position:absolute;margin-top:35px;margin-left:40px;font-family:Arial,Helvetica,sans-serif;font-weight:bold;text-shadow:0px 1px 2px #fff;}
#largecaption{text-align:center;height:100px;width:100%;background-color:#111;position:absolute;width:444px;margin-top:270px;-moz-border-radius-bottomleft:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;display:none;color:#fff;font-size:30px;font-family:Arial;letter-spacing:-1px;font-weight:bold}
#largecaption .captionContent{padding:5px;}
#largecaption .captionShine{background:url('images/interface/bigshine.png');position:absolute;width:444px;height:100px;background-position:-150px 0;background-repeat:no-repeat;}
#loader{width:150px;height:150px;background-image:url('images/interface/loader.gif');background-repeat:no-repeat;position:absolute;}
分享到QQ
分享到微博
微信扫一扫
