1
これで問題を解決できないようです。 FF、Chromeなどでうまくいきます。ここで間違っていることは誰でも知っていますか？ロールオーバーと画像リンクは機能しないだけでなく、ナビゲーションバーもすべて乱されます。通常は私はただ笑って、古いブラウザに新しいブラウザのリンクを投稿しますが、残念ながら私はこの贅沢はありません。私はIEでスコープの外に落下さIE8でjQueryアニメーションが正しく機能しない
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">
/* Preloading, if you are into that */
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
jQuery.preLoadImages(
'img/moons/a0.png',
'img/moons/a1.png',
'img/moons/a2.png',
'img/moons/a3.png',
'img/moons/a4.png',
'img/moons/a5.png',
'img/moons/a6.png',
'img/moons/p0.png',
'img/moons/p1.png',
'img/moons/p2.png',
'img/moons/p3.png',
'img/moons/p4.png',
'img/moons/p5.png',
'img/moons/p6.png'
);
/* hover actions for link-binding */
function evMouseOver(i) {
console.log(i);
$('#moon img').eq(i).attr('src','img/moons/a' + i + '.png');
$('ul#nav li').eq(i).addClass('hover');
}
function evMouseOut(i) {
$('#moon img').eq(i).attr('src','img/moons/p' + i + '.png');
$('ul#nav li').eq(i).removeClass('hover');
}
/* If the image sizes are not specified, this must be called at $(window).load() */
$().ready(function() {
$('#nav').fadeIn(2000);
var original_pos = [];
var parent_width = $('#moon').width();
var parent_pos = $('#moon').offset();
/* set lists to respond to each other's hover events */
$('.hoverbind').children().each(function(i) {
i = $(this).index();
$(this).hover(
function() {
evMouseOver(i);
},
function() {
evMouseOut(i);
}
);
/* enable remote clicking for IMGs and LIs (HREF used will be the one in the UL) */
$(this).click(
function() {
parent.location = $('ul#nav li').eq(i).children('a').attr('href');
}
);
});
$('#moon img').each(function() {
el = $(this);
/* keep default positions of children */
original_pos = el.offset();
/* move everybody to the middle: Lc=Lp+(Wp-Wc)/2 */
el.offset({
'left' : parent_pos.left + (parent_width - this.width)/2,
'top' : original_pos.top
});
/* fade in */
el.animate(
{
'opacity' : 1
}
);
/* bring everybody back where they started */
el.animate(
{
'left' : 0, // (original_pos.left - parent_pos.left) - (original_pos.left - parent_pos.left), // Which of course = 0... WTF? Does this make sense???
'top' : 0 //(original_pos.top - parent_pos.top)
},
{
'duration' : 6000,
'complete' : function() {}
}
);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="logo">
<img src="img/logo.png" alt="Full Moon Creative" width="700" height="136" />
</div>
<div id="moon" class="hoverbind">
<img src="img/moons/p0.png" alt="" width="77" height="455" />
<img src="img/moons/p1.png" alt="" width="104" height="455" />
<img src="img/moons/p2.png" alt="" width="167" height="455" />
<img src="img/moons/p3.png" alt="" width="321" height="455" style="z-index: 3;" />
<img src="img/moons/p4.png" alt="" width="164" height="455" />
<img src="img/moons/p5.png" alt="" width="113" height="455" />
<img src="img/moons/p6.png" alt="" width="69" height="455" />
</div>
<!-- Changing the HREFs on this link list will change the links on corresponding images - by index, so watch order -->
<ul id="nav" class="hoverbind">
<li><a href="#contact">Contact Us</a></li>
<li><a href="#gal">Gallery</a></li>
<li><a href="#prods">Production Services</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#mktng">Marketing Services</a></li>
<li><a href="#clist">Client List</a></li>
<li><a href="#clogin">Client Login</a></li>
</ul>
</div>
</body>
</html>