0
私はサイクルプラグインを使用していますが、もちろんIE8の場合を除いて素晴らしいです。誰にでもアイデアはありますか？ライブjQueryサイクルアニメーションがIEで破損する
：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://daveywhitney.com/moons/jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.centermoon').cycle({
fx: 'fade',
timeout: 1000,
speed: 500,
nowrap: 1
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.moonpieces').cycle({
fx: 'curtainX',
timeout: 1100,
speed: 1500,
nowrap: 1
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.fadenav').cycle({
fx: 'curtainX',
timeout: 1500,
speed: 500,
nowrap: 1
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#navfade').fadeIn(2000);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img class="full" src="http://daveywhitney.com/moons/img/logo.png" />
</div>
<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/moonpieces.png" />
</div>
</div>
<div id="navfade" style="display:none;">
<ul id="nav">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Production Services</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Marketing Services</a></li>
<li><a href="#">Client List</a></li>
<li><a href="#">Client Login</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
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 {
position: absolute;
z-index: -1;
}
.centermoon {
position: absolute;
}
#nav {
width:980px;
margin:40px 0 0 40px;
padding:0;
}
#nav li {
display:inline;
padding:0;
margin:0 60px 0 0;
color:#fff;
}