Question

早些时候，我要求提供一个脚本，可以加载游戏，显示一些横幅，直到游戏加载和它显示的加载进度，它不应该是假的，很多人说你需要闪存，但atlast我找到了一个可以为我做的脚本。但是当我开始在脚本中使用脚本时出现问题，宽度和高度可以是px，如宽度500，但是当我100％使脚本停止工作时，它不能达到宽度100％。我不能使用px或除100％以外的任何其他东西，因为我希望闪光灯随着屏幕分辨率的变化而增加其宽度和高度。

这是脚本，你可以用它来制作一个demo html文件用于测试目的，如果你不想制作一个我也准备提供一个演示页面，请给它留言。谢谢^ _ ^

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Pre-roll Example page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://files.cryoffalcon.com/woro/preroll.dev.js"></script>
    <style>
        .gamecontent                {width:923px;padding:0px;margin:0px auto 0px auto;background-color:#FFF;}
        .gamecontent .gamewrapper   {margin:0px auto 0px auto;}
        .gamecontent .game          {float:left;margin:0px auto 0px auto;padding:0px;overflow:hidden;width:1px;height:1px}
        .gamecontent .ad            {display:none;width:300px;height:300px;margin:0px auto 0px auto;padding:50px auto 0px auto;text-align:center;font-size:10px}
        .gamecontent .ad #progress  {width:200px;height:10px;margin:10px auto 0px auto;padding:0px;border:solid 1px #E7B9D1;text-align:left;}
        .gamecontent .ad #pbar      {width:0px;height:10px;background-color:#CCC;}
        .gamecontent .ad #pskip     {text-align:center;}    
        .medrectangle               {width:300px;height:250px;border:none}
    </style>
</head>

<body>
<div class="gamecontent">
    <div class="gamewrapper" style="height:640px;width:640px;">
      <div class="game" id="gameframe"></div>
        <div id="adframe" class="ad">
            <div>Advertisement</div>
            <div id="plad"></div>
            <div id="progress"></div>
        </div>
        <noscript>  
            <div>
                 <!--Game embed code should be placed here here-->
            </div>
        </noscript>
    </div>
</div>

<script type="text/javascript" language="javascript">
var af = 'adframe';
var gf = 'gameframe';
var gid = 'gameswf';
var adinvoke = '<iframe class="medrectangle" src="<!--to show my logo or ad-->" scrolling="no"></iframe>';

function skipad() {
    $('#plad').html('<div></div>');
    $('#'+af).hide();
    $('#'+gf).css('width','640px');
    $('#'+gf).css('height','640px');
}
$('#gameframe').preloadad(
    {  // calls the init method
      swf       : 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
      width     : 640,
      height    : 640,
      gameid    : gid,
      gameframe : gf,
      adframe   : af,
      adcode    : adinvoke,
      pltime    : 10000,
      gametype  : 'swf',
      base      :'http://games.balloontowerdefense.net/b/',
      skiptxt   : 'Click here to show the game',
      showad    :'1'
    });
</script>

</body>
</html>

在上面的代码中640宽度和高度是问题，因为它不能使用100％的值，我想知道如何使其工作在100％的宽度和高度。我不知道我错过了什么或者我哪里出错了？

Answer 1

假设您正在使用此插件：http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html，我可以通过两种方式了解此问题。

首先（两者中更灵活）：

修改插件以使用用户提供的单位而不是像素。为此，您需要修改插件中的两个函数applygameiframe和showgame。

applygameiframe应更改为：

var applygameiframe = function() {
  var gc = '#'+settings.gameframe;
  var iframe = $('<iframe />').attr({
    "id": settings.gameid,
    "src": settings.swf,
    "frameborder": 0,
    "scrolling": "no",
    "marginwidth": 0,
    "marginheight": 0
  }).css({
    "height":'settings.height
    "width": settings.width
  });
  $(gc).append(iframe);
  return true;
};

showgame应更改为：

var showgame = function() {
    var ac   = '#' + settings.adframe;
    var game = '#' + settings.gameframe;
    $(ac).hide();
    $(game).css({
    "width": settings.width,
    "height": settings.height
    });
};

完成这些更改后，内联CSS应设置为您提供的任何参数（例如100%，50em等。）

第二种方式（灵活性较差）是抓住窗口大小（或计算出的高度/宽度，无论你想要的是什么），然后将其调整为高度/宽度：

$('#gameframe').preloadad({ // calls the init method
    swf: 'http://games.balloontowerdefense.net/b/balloon_tower_defense_4_expansion.swf',
    width: window.screen.availWidth, // or $('div.gamewrapper')[0].clientWidth
    height: window.screen.availHeight, // or $('div.gamewrapper')[0].clientHeight
    gameid: gid,
    gameframe: gf,
    adframe: af,
    adcode: adinvoke,
    pltime: 10000,
    gametype: 'swf',
    base: 'http://games.balloontowerdefense.net/b/',
    skiptxt: 'Click here to show the game',
    showad: '1'
});

如何在javascript中使其100％宽度和高度

1 个答案: