私のコードの説明:
常に左にスクロールしている 3 つの画像があります。画像が左に移動しすぎると、再び右端に配置され、素晴らしいトランジション効果が生まれます。
画像はタグを使用してマッピングされており、マウスを画像の上に置くとスクロールが停止し、画像の特定の領域にポップオーバーが表示されます。
Chrome と Safari ではこれは機能しますが、FireFox ではホバー機能がタグに登録されません。私は何をすべきか？
これが私のコードです：
var custom_style = 'night'; // set this to day or night, and then set_style to "true" to activate it
var set_style = true; // When this is false, it uses your computer's time
var speed = 2; // number of pixels moved left every 50 milliseconds
paused = false;
area = null;
$(document).ready(function() {
var date = new Date();
var style = "day"
if (date.getHours() >= 17 || date.getHours() <= 5 || (set_style && custom_style == 'night')){
style="night";
$('#day_sign2').hide();
$('#night_sign').show();
$('.customarea').addClass('customareaNight');
}else{
$('#container').css( 'backgroundImage', '0 !important' );
$('#container').addClass('night_container');
}
setInterval(wells_fancy_slider, 50);
$('area').css('z-index', '5000');
t = null;
$('area').hover(function() { // this is not registering in FF
$('.customarea').hide();
paused = true;
area = $(this).attr('id');
$('.custom' + area).show();
alert(area);
console.log('.custom' + area);
t = setTimeout(custom_mouseover, 5000);
}, function() {
setTimeout(function() {
$('.customarea').hide();
paused = false;
}, 2500)
});
if (style == 'day'){
$('#container').css('background-color', 'white');
$('.night').hide();
}else{
$('.day').hide();
}
})
function custom_mouseover() {
clearInterval(t)
}
function wells_fancy_slider() {
if (!paused) {
if (parseInt($('.pic1').css('left')) < -2770) {
$('.pic1').css('left', '5586');
}
if (parseInt($('.pic2').css('left')) < -2770) {
$('.pic2').css('left', '5586');
}
if (parseInt($('.pic3').css('left')) < -2770) {
$('.pic3').css('left', '5586');
}
$('.pic1, .pic2, .pic3').css('left', '-=' + speed);
}
}
そしてHTML：
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="wells_slider.css">
<script type="text/javascript" src="wells_slider.js"></script>
</head>
<body>
<div style="position:absolute; width: 15%; z-index: 2000; float: left; height: 100%; left:0px; background-color:black;"></div>
<div style="position:absolute; width: 15%; z-index: 2000; float: right; height: 100%; right:0px; background-color:black;"></div>
<div id="container">
<div style="width: 100%;margin-left: auto;margin-right: auto;position: relative;height: 50px;">
<img id="day_sign" src="img/day_sign.png" />
<img id="day_sign2" src="img/day_sign2.png" />
<img id="night_sign" src="img/night_sign.png" style="display:none;" />
</div>
<div id="pic_container">
<img class="pic1 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic2 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic3 day" src="img/LMday.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic1 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic2 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<img class="pic3 night" src="img/LMnight.png" usemap="img_map" border="0" width="2798" height="450" alt="" />
<map id="img_map" name="img_map">
<area id="area1" shape="rect" coords="3,69,413,445" alt="1" title="1" />
<area id="area2" shape="rect" coords="413,73,692,443" alt="2" title="2" />
<area id="area3" shape="rect" coords="692,91,919,440" alt="3" title="3" />
<area id="area4" shape="rect" coords="917,102,1135,440" alt="4" title="4" />
<area id="area5" shape="rect" coords="1134,103,1363,441" alt="5" title="5" />
<area id="area6" shape="rect" coords="1360,107,1591,438" alt="6" title="6" />
<area id="area7" shape="rect" coords="1589,96,1872,438" alt="7" title="7" />
<area id="area8" shape="rect" coords="1871,100,2072,439" alt="8" title="8" />
<area id="area9" shape="rect" coords="2072,116,2272,436" alt="9" title="9" />
<area id="area10" shape="rect" coords="2270,70,2597,433" alt="10" title="10" />
<area id="area11" shape="rect" coords="2595,78,2784,430" alt="11" title="11" />
</map>
<div class="p_container popup_container1 pic1">
<a href="http://www.wellsjohnston.com"><div class="customarea customarea1" >
Some Text
</div></a>
<div class="customarea customarea2" style="left:400px;">
Some Text
</div>
<div class="customarea customarea3" style="left:690px;">
Some Text
</div>
<div class="customarea customarea4" style="left:912px;">
Some Text
</div>
<div class="customarea customarea5" style="left:1132px;">
Some Text
</div>
<div class="customarea customarea6" style="left:1357px;">
Some Text
</div>
<div class="customarea customarea7" style="left:1585px;">
Some Text
</div>
<div class="customarea customarea8" style="left:1870px;">
Some Text
</div>
<div class="customarea customarea9" style="left:2070px;">
Some Text
</div>
<div class="customarea customarea10" style="left:2265px;">
Some Text
</div>
<div class="customarea customarea11" style="left:2595px;">
Some Text
</div>
</div>
<div class="p_container popup_container2 pic2">
<div class="customarea customarea1" >
Some Text
</div>
<div class="customarea customarea2" style="left:400px;">
Some Text
</div>
<div class="customarea customarea3" style="left:690px;">
Some Text
</div>
<div class="customarea customarea4" style="left:917px;">
Some Text
</div>
<div class="customarea customarea5" style="left:1132px;">
Some Text
</div>
<div class="customarea customarea6" style="left:1357px;">
Some Text
</div>
<div class="customarea customarea7" style="left:1585px;">
Some Text
</div>
<div class="customarea customarea8" style="left:1870px;">
Some Text
</div>
<div class="customarea customarea9" style="left:2070px;">
Some Text
</div>
<div class="customarea customarea10" style="left:2265px;">
Some Text
</div>
<div class="customarea customarea11" style="left:2595px;">
Some Text
</div>
</div>
<div class="p_container popup_container3 pic3">
<div class="customarea customarea1" >
Some Text
</div>
<div class="customarea customarea2" style="left:400px;">
Some Text
</div>
<div class="customarea customarea3" style="left:690px;">
Some Text
</div>
<div class="customarea customarea4" style="left:917px;">
Some Text
</div>
<div class="customarea customarea5" style="left:1132px;">
Some Text
</div>
<div class="customarea customarea6" style="left:1357px;">
Some Text
</div>
<div class="customarea customarea7" style="left:1585px;">
Some Text
</div>
<div class="customarea customarea8" style="left:1870px;">
Some Text
</div>
<div class="customarea customarea9" style="left:2070px;">
Some Text
</div>
<div class="customarea customarea10" style="left:2265px;">
Some Text
</div>
<div class="customarea customarea11" style="left:2595px;">
Some Text
</div>
</div>
</div>
</div>
</body>
</html>