jQuery動畫與滾動

我有jquery循環的這個小頁面介紹，我試圖設置它，所以當你翻轉單獨的圖像有一個發光。由於某種原因，它只是沒有出現。我用CSS和JS試了一下。有誰知道發生了什麼問題？jQuery動畫與滾動

<!DOCTYPE html> 
<html> 
<head> 
<title>MOON</title> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.centermoon').cycle({ 
     fx: 'fade', 
     timeout: 1000, 
     speed: 500, 
     cleartypeNoBg: true, 
     nowrap: 1 
    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.moonpieces').cycle({ 
     fx: 'curtainX', 
     timeout: 1100, 
     speed: 1500, 
     cleartypeNoBg: true, 
     nowrap: 1 
    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.fadenav').cycle({ 
     fx: 'curtainX', 
     timeout: 1500, 
     speed: 500, 
     cleartypeNoBg: true, 
     nowrap: 1 
    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#navfade').fadeIn(2000); 
}); 
</script> 




</head> 
<body> 
<div id="wrapper"> 
<div id="logo"> 

</div> 


<div id="headwrap"> 
<div id="moonwrap"> 
    <div class="centermoon"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/centermoon.png" /> 
    </div> 

    <div class="moonpieces"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/sliced/moonpiece1.png" /> 
    </div> 
    <div class="moonpieces"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/sliced/moonpiece2.png" /> 
    </div> 
    <div class="moonpieces"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/sliced/moonpiece3.png" /> 
    </div> 
    <div class="moonpieces"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/sliced/moonpiece4.png" /> 
    </div> 
    <div class="moonpieces"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/sliced/moonpiece5.png" /> 
    </div> 
    <div class="moonpieces"> 
     <img src="http://daveywhitney.com/moons/img/spacer.png" /> 
     <img src="http://daveywhitney.com/moons/img/sliced/moonpiece6.png" /> 
    </div> 

</div> 
<div id="navfade" style="display:none;"> 


<ul id="nav"> 

<li><a class="cntct"href="#">Contact Us</a></li> 
<li><a href="#" class="gal">Gallery</a></li> 
<li><a href="#" class="prods" >Production Services</a></li> 
<li><a href="#" class="home">Home</a></li> 


<li><a href="#" class="mktng">Marketing Services</a></li> 
<li><a href="#" class="clist">Client List</a></li> 
<li><a href="#" class="clogin">Client Login</a></li> 

</ul> 
</div> 

</div> 
</div> 
</body> 
</html> 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/* END RESET - BEGIN LAYOUT */ 

html { 
    background-image:url('http://daveywhitney.com/moons/img/bg.jpg'); 
} 

#logo { 
    width:700px; 
    height:136px; 
    margin:0 auto; 
} 

#wrapper { 
width:1020px; 
margin:0 auto; 
} 

#moonwrap { 
    width:1020px; 
    height:455px; 
    margin:0 atuo; 

} 
.moonpieces { 
    width:1019px; 
    height:455px; 
    position: absolute; 
    z-index: -1; 
} 

.centermoon { 
    width:1019px; 
    height:455px; 
    position: absolute; 
} 

#nav { 
width:1020px; 
margin:40px 0 0 0; 
padding:0; 
} 
#nav li { 
display:inline; 
padding:0; 
color:#fff; 
} 

#nav li a { 
    color:#777; 
} 




.gal { 
margin:0 0 0 40px; 
} 

.prods { 
margin:0 0 0 60px; 
} 

.home { 
margin:0 0 0 140px; 
} 

.mktng { 
    margin:0 0 0 150px; 
} 

.clist { 
    margin: 0 0 0 40px; 
} 

.clogin { 
    margin: 0 0 0 40px; 
} 






a #headwrap:hover { 
    background-position: -150px 0; 
    color:#fff; 
}

來源

2011-02-02 Davey

你能編輯代碼巨大名單只是什麼相關？使用CSS3可以完成外部發光。（IE8 <將不支持它。） – Kyle 2011-02-03 08:27:55

您可以使用：

.className { 
    -moz-box-shadow: 1px 1px 5px #fff; 
    -webkit-box-shadow: 1px 1px 5px #fff; 
    box-shadow: 1px 1px 5px #fff; 
}

JSFiddle

來源

2011-02-08 23:19:33

jQuery動畫與滾動

回答

相關問題