jquery animation with rollover
I have this little page intro with jquery cycle and I am trying to set it up so when you rollover the separate images there is a glow. For some reason it is just not showing up. I tried it with css and js. Does anyone know what is going wrong?
Live: http://daveywhitney.com/moons/
<!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;
}
You can use:
.className {
-moz-box-shadow: 1px 1px 5px #fff;
-webkit-box-shadow: 1px 1px 5px #fff;
box-shadow: 1px 1px 5px #fff;
}
JSFiddle
加载中,请稍侯......
精彩评论