Question

大家好，我有一个问题。

我的设备上的jQuery移动代码存在一个奇怪的问题。

示例iPad2：

因此，当我在手机中以纵向模式启动页面时，图像看起来像这样（它不应该像这样缩小） http://oi43.tinypic.com/htd98i.jpg
当我在横向模式下打开它时，它仍能正常工作 http://oi44.tinypic.com/2n1f8yw.jpg
当我再次在纵向模式下更改它时，恐怖发生了 http://oi43.tinypic.com/jfj3wh.jpg

此后它只在模式2和3之间变化。

我在LG OptimusG上试过它并且它可以正常运行，只是在模式1上它没有像在iPad上那样缩小。

我在没有JQM的单独页面中尝试了这个，并且在插入JQM时它可以正常运行。

我使用了ImageMapster脚本，我的代码（内页内容）

<img src="images/map.jpg" 
  usemap="#usa" style="width:100%;">

<map id="usa_image_map" name="usa">
    <area href="http://www.google.com" state="NH" full="New Hampshire" onclick="haha();" shape="poly" coords="251,99,376,138,477,180,601,279,644,319,593,369,512,332,535,291,527,282,524,281,499,329,387,281,382,289,316,269,323,254,280,235,285,220,254,206,249,219,234,212,192,74,248,74,236,98">
    <area href="http://www.google.com" state="NH" full="New Hampshire" onclick="haha2();" shape="poly" coords="109,205,136,302,191,287,184,262,212,254,210,246">
    <area href="http://www.google.com" state="NH" full="New Hampshire" onclick="haha3();" shape="poly" coords="67,45,98,158,199,200,155,68,104,68,101,47">

</map>

正如我所说，问题恰好发生在与JQM一起使用而不是普通的html。

如果有帮助：这是来自ImageMapster http://jsfiddle.net/jamietre/jQG48/

我希望你能理解这个问题...... 我还有其他任何问题......

希望你能帮我解决问题......谢谢

更新

HTML内部：

<div role="content" class="ui-content">
    <img src="images/map.jpg" 
      usemap="#usa" style="width:100%;">

    <map id="usa_image_map" name="usa">
        <area href="http://www.google.com" state="NH" full="New Hampshire" onclick="haha();" shape="poly" coords="251,99,376,138,477,180,601,279,644,319,593,369,512,332,535,291,527,282,524,281,499,329,387,281,382,289,316,269,323,254,280,235,285,220,254,206,249,219,234,212,192,74,248,74,236,98">
        <area href="http://www.google.com" state="NH" full="New Hampshire" onclick="haha2();" shape="poly" coords="109,205,136,302,191,287,184,262,212,254,210,246">
        <area href="http://www.google.com" state="NH" full="New Hampshire" onclick="haha3();" shape="poly" coords="67,45,98,158,199,200,155,68,104,68,101,47">
    </map>    
</div>

脚本是这样的：

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        var resizeTime = 100;     // total duration of the resize effect, 0 is instant
        var resizeDelay = 100;    // time to wait before checking the window size again
                                  // the shorter the time, the more reactive it will be.
                                  // short or 0 times could cause problems with old browsers.

        $('img').mapster({
            mapKey: 'state'
        });

        // Resize the map to fit within the boundaries provided

        function resize(maxWidth,maxHeight) {
             var image =  $('img'),
                imgWidth = image.width(),
                imgHeight = image.height(),
                newWidth=0,
                newHeight=0;

            if (imgWidth/maxWidth>imgHeight/maxHeight) {
                newWidth = maxWidth;
            } else {
                newHeight = maxHeight;
            }
            image.mapster('resize',newWidth,newHeight,resizeTime);   
        }

        function onWindowResize() {

            var curWidth = $(window).width(),
                curHeight = $(window).height(),
                checking=false;
            if (checking) {
                return;
                    }
            checking = true;
            window.setTimeout(function() {
                var newWidth = $(window).width(),
                   newHeight = $(window).height();
                if (newWidth === curWidth &&
                    newHeight === curHeight) {
                    resize(newWidth,newHeight); 
                }
                checking=false;
            },resizeDelay );
        }

    $(window).bind('resize',onWindowResize);


    });//]]>  

    function haha(){
        window.location.href = "glavna.html#pageprostori";
    };
    function haha2(){
        window.location.href = "glavna.html#pageopis";
    };
    function haha3(){
        window.location.href = "glavna.html#pagekontakt";
    };
</script>

我将这个包含在html头

<script type='text/javascript' src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>

jQuery移动定位图像

0 个答案: