Question

任何人？任何线索??

我正在尝试在同一页面上创建两个具有hilightable功能的地图。这适用于所有现代浏览器（IE11，Chrome等），但不适用于IE9。您可以使用以下小提琴证明这一点：http://jsfiddle.net/Guill84/Sws2T/13/

启动插件的脚本我在下面粘贴以方便参考。是否有理由在所有浏览器中正确加载，而不是在IE9中？或者我的代码有问题吗？使用的插件是'Maphilight'（https://github.com/kemayo/maphilight）

提前致谢， ģ

$(function () {
    $('.map').maphilight({
        stroke: false,
        fillColor: 'D2D2D2',
        fillOpacity: 1
});
    $('.map2').maphilight({
        stroke: false,
        fillColor: 'D2D2D2',
        fillOpacity: 1
});

    //light up first element
    //this code is repeating below but not sure how to make more condensed
    var data = $(this).data('maphilight') || {};
    data.alwaysOn = true;
    $('.map, .map2').data('maphilight', data).trigger('alwaysOn.maphilight');
    // initialize tabbing
    $(".tabs area:eq(0)").each(function () {
        $(this).addClass("current");
    });
    $(".tab-content").each(function () {
        $(this).children(":not(:first)").hide();
    });
    $(".tabs area").each(function (o, i) {
        var d = $(this).data('maphilight') || {};
        d.fillOpacity = 1;
        d.alwaysOn = true;
        $(this).attr("rel", d.fillColor);
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    });
    $(".tabs area").hover(function () {
        var d = $(this).data('maphilight') || {};
        //d.fillOpacity=0.6;
        d.fillColor = "A0A0A0";
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    }, function () {
        var d = $(this).data('maphilight') || {};
        //d.fillOpacity=0.6;
        if (typeof d.clicked === "undefined" || d.clicked == false) {
            d.fillColor = $(this).attr("rel");
        } else {
            d.fillColor = "379ee0";

        }
        $(this).data('maphilight', d).trigger('alwaysOn.maphilight');
    });
    //map clicks
    $(".tabs area").click(function () {
        //areas loop:
        $(".tabs area").not(this).each(function (o, i) {
            var d = $(this).data('maphilight') || {};
            d.clicked = false;
            d.fillColor = $(this).attr("rel");
            if (d.alwaysOn === false) {
                //d.alwaysOn = false;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
            }
        });

        var data = $(this).data('maphilight') || {};
        data.alwaysOn = true;
        data.fillColor = "379ee0";
        data.clicked = true;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');

        if ($(this).hasClass("current") === false) {
            var thisTarget = $(this).attr("href");
            $(this).parents(".tabs").find('area.current').removeClass('current');
            $(this).addClass('current');
            $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function () {
                $(thisTarget).fadeIn("normal");
            });

        }
        return false;
    });
});

Answer 1

我看到的问题不是插件jQuery Maphilight，而是另一个 - jQuery Panzoom，似乎不支持低于v.9的Internet Explorer版本：

Panzoom使用CSS变换和矩阵函数来利用浏览器中的硬件/ GPU加速，这意味着元素可以是任何东西：图像，视频，iframe，画布，文本，WHATEVER。虽然不支持IE＆lt; = 8，但这个插件是面向未来的。

详情请见此处 - https://github.com/timmywil/jquery.panzoom/blob/master/README.md

但是，你说，你用IE 9测试，你究竟是如何进行测试的，这是真正的IE 9还是你在模拟版本模式下运行IE 11？我可以确认，jsfiddle代码在模拟模式下在IE 9下工作正常，除了使用鼠标滚轮进行缩放外，它只适用于按钮Zoom In / Zoom Out。

在IE9中使用Jquery选项卡进行Maphilight冲突

1 个答案: