0

現在、麻雀ゲームを作成中です。ゲームは完全なものと同じくらい良いです。div id="holder"ゲームがブラウザ ウィンドウの中央に配置されるように、ゲームを div ( ) に配置することを決定するまで、すべてがうまくいきました。

何が起こるのですか？

ステップ 1: ブラウザ ウィンドウのサイズを変更して、ゲームのサイズに合わせます (左右に白い枠線がないようにします)。注:この問題は上部にスペースを追加する場合にも当てはまりますが、このデモでは調整できません。これ。

ステップ 2: クリック: Click to Start、ゲームが開始され、任意の HINT ボタンをクリックします。クリックしたボタンの上に nr が表示され、上に移動して消えます。この番号は正しく配置されており、クリックした HINT ボタンのすぐ上の中央に常に表示されます。

ステップ 3: ブラウザ ウィンドウのサイズを変更し、ゲーム (たとえば) の左右に 2cm の余白を空けます。

ステップ 4: 次に、別の HINT ボタンをクリックします。nr が表示されていることに注意してください。ただし、HINT ボタンの中央と上ではなく、右に 2cm です。

それで、何が起こっているのですか？私の推測ではdiv class="score"、nr を含む div () のオフセットには、そのオフセット (またはこのようなもの) に空白が含まれています。

これは明らかに望んでいないことです。しかし、私はこれを修正する方法の手がかりがありません...

いくつかのコード スニペット:

DIV の CSS:

#holder {
    width: 940px; 
    margin: auto auto;
}
.score {
    display: none;
    pointer-events: none;
    position: absolute;
    font-size: 1em;
    text-align: center;
    color:#FFF;
    z-index: 1;
}

JS 部分 (jQuery を使用):

var offset = $(this).hide(500).offset();
var penalty = Math.round(score * -0.10);  //calculates a score penalty
score += penalty; //this is the result
$('.sc').text(score); //this is needed elsewhere in the script
$('.score') //start of showing the div and it's animation
      .show()
      .text(penalty)
      .css({
          top: offset.top - $('.score').height() - 90,
          left: offset.left,
          width:'3.5em'
      })
      .stop()
      .delay(100)  
      .animate({top: offset.top - $('.score').height() - 140},700)
      .hide(0); 
 ...some more code here, not relevant to this

さらにコードが必要な場合はお知らせください。これで十分だと思います。この問題が解決されることを願っています！

敬具

4

3 に答える 3

0

ホルダー css に position:relative; を追加します。

#holder {
    width: 940px; 
    margin: auto auto;
    position: relative;
}

それが修正されるかどうかを確認してください。

于 2012-05-30T15:09:16.327 に答える
0

私はそれを見つけたと思います。私のCSSには別のdivがあります：

#s0 {
    position: relative;
    float: left; 
    height: 570px;
    width: 760px;
    background: #222 url('images/bg.png');
}

削除:position: relative;修正されたようです。さらにいくつかのテストを行います。あなたの提案に感謝します！

于 2012-05-30T20:58:34.233 に答える