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

时间:2012-03-24 15:26:55

标签: javascript jquery

早些时候,我要求提供一个脚本,可以加载游戏,显示一些横幅,直到游戏加载和它显示的加载进度,它不应该是假的,很多人说你需要闪存,但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%的宽度和高度。我不知道我错过了什么或者我哪里出错了?

1 个答案:

答案 0 :(得分:0)

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

首先(两者中更灵活):

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

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'
});