1

我有一个带有滚动条的背景图像（城市图像），在该图像上我放置了一些小图像（就像城市图像上的炸弹图像）。我有画布宽度和高度取决于这些变量我将炸弹图像放在城市图像上。当我将炸弹图像放置在 430*300 设备中的 can.width/2 和 can.height/2 时，图像将位于中心，但是当我尝试在更大屏幕的移动设备上进行测试时，炸弹图像的位置正在改变。我需要将炸弹图像放置在所有设备的同一位置。当我放大时，位置也在变化。任何人都请帮我解决这个问题。

这是我的代码

  function smallBombImg(){
document.getElementById('carImg1').style.top = can.width/2 +"px";
document.getElementById('carImg1').style.left = can.height/2 +"px";
//document.getElementById('carImg1').style.background-attachment = "fixed";
document.getElementById('carImg1').style.display = "block";
document.getElementById('carImg1').src = 'img/bomb1.png';
    }

HTML代码在这里

<body>
<div id="container">
    <canvas id="can"></canvas>
</div>
<div id="btn">  
    <input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
    <input type="image" id="zoomOut" src="img/down.png"
        onclick="zoomOut()" />
</div>
<div id="score">
    <p id="scoreCount">
        <b></b>
    </p>
</div>
<div>


<img alt="simple1" id="carImg1" style="position: absolute; display: none;" /> 




</div>
</body>

4

1 回答 1

0

我必须简短，我很抱歉，但我迟到了。

使用 jQuery：

var windowEventTimeoutEnded;

$(window).resize(function() {

    clearTimeout(windowEventTimeoutEnded);
        $(window).height(); // gets the height of the window
        $(window).width(); // gets the width of the window

    // This ensures the below does not trigger until the resize event is finished
    windowEventTimeoutEnded = setTimeout(function() { 

        // Perform your resizing math and logic here, such
        canvas.css({
            width: 1234,
            height: 235,
            position: 'absolute' // etc, etc, etc
        })

    }, 500 );

});

对不起，简短，希望这会有所帮助。我稍后会回来检查这是否有帮助并在必要时添加它，祝你好运！

于 2013-10-09T05:48:40.300 回答