1

我有一个带有图像映射的图像。图像映射将图像分成 4 个扇区（上、右、下、左）。每次您单击一个扇区（图像映射区域）时，图像都会旋转，直到该扇区位于顶部。我创建了一个小例子来展示我是如何做到的：http: //jsfiddle.net/44YhF/

或作为完整的 HTML 文档：

<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jQueryRotate.js" type="text/javascript"></script>
<!-- QueryRotate is from: https://jqueryrotate.googlecode.com/files/jQueryRotate.js -->
<script type="text/javascript">
rotated=0;
aktuell=0;
isRotating=false;
jQuery(document).ready(function() {

$("#map area").click(function(event) {
console.log("click");
    event.preventDefault(); //bringt auch nichts
    if(!isRotating||true) {  //true hier raus nehmen damit die einzelnen Abschnitte nur klickbar sind wenn gerade keine Rotation läuft

        isRotating=true;
        pos=0;
        if(aktuell<$(this).attr("pos")) {
            pos=$(this).attr("pos");
        } else {
            pos=parseInt($(this).attr("pos"))+4;
        }
        rotatedif=360-(Math.abs(aktuell-pos)*90);
        rotate=rotated+rotatedif;

        aktuell=$(this).attr("pos");

        $("#cycle").rotate({animateTo:rotate, duration:(10-(Math.abs(aktuell-pos)))*300, callback: setRotatingOff});

        rotated=rotate;

    }
});


function setRotatingOff() {
    isRotating=false;
}

});
</script>
</head>
<body>
<img src="http://uploads6.wikipaintings.org/images/m-c-escher/circle-limit-iii.jpg!Blog.jpg" id="cycle" border="0" usemap="#map">
<map id="map" name="map">
<area shape="poly" coords="82,73,250,248,429,91," href="#" alt="" title=""   pos="0"/>
<area shape="poly" coords="421,85,250,246,417,419," href="#" alt="" title=""   pos="1"/>
<area shape="poly" coords="249,247,412,418,75,414," href="#" alt="" title=""   pos="2"/>
<area shape="poly" coords="248,247,74,411,82,76," href="#" alt="" title=""   pos="3"/>
</map>
</body>
</html>

这适用于 Chrome、Firefox、IE9/10。但在 IE8 中，图像仅在您第一次单击区域时旋转。第一次点击后，当你点击一个区域时不再触发点击事件。

我该怎么做才能让它在 IE8 中工作？

4

2 回答 2

1

在这种情况下，我可以使用一个小技巧：我在原始图像上使用透明图像，并在透明图像上使用贴图。所以我可以在不旋转图像映射的情况下旋转原始图像。

于 2013-08-09T08:22:30.183 回答
0

IE8 不支持标准 CSS transform:rotate；它改为使用专有的 activeXfilter方法。jQuery 通过为您提供一个标准的调用方法来向您隐藏这一点，但在幕后它的工作方式与更现代的浏览器非常不同。

问题是这些filter样式已知有许多缺点和怪癖，这意味着它们并不总是很好地工作，尤其是在与其他浏览器功能结合使用时。

我从未尝试将它与图像映射一起使用，但如果这些功能一起正常工作，我会感到非常惊讶。

其他人总是有可能让我感到惊讶并找到解决方案，但我的感觉是你将不得不接受在 IE8 中无法做到这一点。

您最好的选择可能是采取完全不同的方法。使用Raphael库之类的东西重写你的整个代码来绘制和动画图像。

该库使用浏览器的图形系统（IE8 中的 VML，较新的浏览器中的 SVG），并且将能够显示您的图像，旋转它，并以更跨浏览器兼容的方式提供可点击区域。（它还具有不必使用图像地图的优势，这是一种有点过时的技术）

这会给你一个解决方案，但这确实意味着从头开始重写。我很感激这可能不是你想听到的。

于 2013-08-08T13:00:04.823 回答