如何使它在javascript中的宽度和高度为100％

Question

早些时候我问过一个可以加载游戏的脚本，该脚本会显示一些横幅，直到加载游戏并显示加载进度为止，这不应是假的，很多人说您需要使用Flash，但最后我找到了一个脚本可以为我做到这一点。但是，当我开始在脚本中使用脚本时，存在一个问题，宽度和高度可以以px为单位，例如宽度500，但是当我将其设置为100％时，脚本停止工作时无法将其设置为宽度100％。 我不能使用px或除100％以外的任何其他东西，因为我希望闪光灯随着屏幕分辨率的变化来增加其宽度和高度。

这是脚本，您可以从中制作一个演示html文件以进行测试，如果您不想创建一个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 个解决方案

解决方案1
0 2012-03-24 16:28:56

如何使它在javascript中的宽度和高度为100％

问题描述

1 个解决方案

解决方案1 0 2012-03-24 16:28:56

解决方案1
0 2012-03-24 16:28:56