0

我的代码解释:

我有 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>
4

1 回答 1

0

我想我已经想通了。

在您的图像标签上,您需要在地图名称之前放置一个井号标签。

<img class="pic1 day" src="img/LMday.png" usemap="#img_map" border="0" width="2798" height="450" alt="" />
于 2012-11-22T23:23:19.980 回答