FF 中的 JS 显示不同的输出

我在栅格上有一个图像映射。如果将鼠标悬停在正方形上，它会在图像映射的一侧显示信息。就像铬的魅力一样工作;火狐显示方块更正确...所以坐标不在这里。我必须对火狐浏览器进行特殊的坐标检查吗？还是IE？

<body>
    <div id="map">
        <img src="" id="transparent_map" alt="" usemap="#denkmal_map" />
        <img src="http://img.freepik.com/freie-ikonen/quadratischen-raster-symbol_318-70847.jpg" alt="" />
        <map name="denkmal_map" id="denkmal_map">
            <area alt="" title="" href="#one" shape="rect" coords="7,4,44,43" />
            <area alt="" title="" href="#two" shape="rect" coords="45,3,85,42" />
            <area alt="" title="" href="#three" shape="rect" coords="87,3,125,41" />
            <area alt="" title="" href="#four" shape="rect" coords="6,46,45,83" />
            <area alt="" title="" href="#five" shape="rect" coords="43,45,85,83" />
            <area alt="" title="" href="#six" shape="rect" coords="87,44,124,84" />
            <area alt="" title="" href="#seven" shape="rect" coords="3,82,44,125" />
            <area alt="" title="" href="#eight" shape="rect" coords="46,86,84,125" />
            <area alt="" title="" href="#nine" shape="rect" coords="85,86,128,125" />
            <span id="backer"></span>
        </map>
        <ul>
            <li id="square"><a href="#">Selection</a>
            </li>
        </ul>
    </div>
</body>

还有一些JS代码

$(this).mouseover(function(e) {
    var position = $(this).attr('coords').split(',');
    var x = +position[0] + $('map#denkmal_map').position().left;
    var y = +position[1] + 9; // $(this).parent().position().top;
    console.log('> ' + $(this).attr('coords') + ' > ' + x + '|' + y);
    console.log('> ' + $('map#denkmal_map').offset().left + '|' + ($('map#denkmal_map').height()));
    $('#backer').css({
        top: y - $('map#denkmal_map').position().top + 9,
        left: $('map#denkmal_map').position().left + 150
    });
    $('#square').css({
        top: y,
        left: x
    });
    $('#square').show();
});

https://jsfiddle.net/kwzoc73h/

所以我想出了如何让它在每个浏览器中工作。首先，我将上面显示的html放在引导网格容器中。

<div class="container">
    <div class="row">
        <div class="col-xs-2"></div>
        <div class="col-xs-8" id='col-main'>
            <div id="map">
...

并稍微更改为JS。

$(this).mouseover(function (e) {
    var position = $(this).attr('coords').split(',');
    var y = +position[1] + 9;
    var mapX = $('map').offset().left - $('map').position().left;
    mapX = +position[0];
    var width = position[2] - position[0];
    var height = position[3] - position[1];
    $('#backer').css({top: y - 7, left: 220});
    $('#backer').show();
    $('#square').css({top: y - 9, left: mapX, width: width, height: height});
    $('#square').show();
});

所以现在一切都像魅力一样，在每个浏览器中。

相关内容

最新更新

热门标签：