如何使它在javascript中的宽度和高度为100％
[英]how to make it 100% width and height in javascript
问题描述
well earlier i asked for a script which can load game which showing some banner until the game is loading and the load progress that it shows, it shouldn't be fake, many people said you need flash for it, but atlast i found a script that can do that for me. 
早些时候我问过一个可以加载游戏的脚本，该脚本会显示一些横幅，直到加载游戏并显示加载进度为止，这不应是假的，很多人说您需要使用Flash，但最后我找到了一个脚本可以为我做到这一点。 BUT there is a issue when i started using the script in the script the width and height can be in px like width 500 but it can't be made to width 100% when i make it 100% the script stops working. 但是，当我开始在脚本中使用脚本时，存在一个问题，宽度和高度可以以px为单位，例如宽度500，但是当我将其设置为100％时，脚本停止工作时无法将其设置为宽度100％。 I can't use px or any other thing except 100% as i want the flash to increase its width and height with the change in screen resolution. 我不能使用px或除100％以外的任何其他东西，因为我希望闪光灯随着屏幕分辨率的变化来增加其宽度和高度。
Here is the script, you can make a demo html file out of it for testing purposes, if you don't want to make one i am ready to provide a demo page too, please leave a comment for it. 这是脚本，您可以从中制作一个演示html文件以进行测试，如果您不想创建一个html文件，我也准备提供一个演示页面，请对此发表评论。 Thank you ^_^ 谢谢^ _ ^
<!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>
in the above code the 640 width and height is the issue, as it doesn't work with 100% values, i was wondering how to make it work with 100% width and height. 在上面的代码中，640的宽度和高度是问题，因为它不适用于100％的值，我想知道如何使其与100％的宽度和高度一起工作。 I don't know what did i miss or where did i go wrong? 我不知道我想念了什么，或者我哪里出错了？
1 个解决方案
解决方案1
0 2012-03-24 16:28:56
Assuming you're using this plugin: http://www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html , there are two ways I can see going about this. 假设您正在使用此插件： http : //www.balloontowerdefense.net/jquery-preloader/jquery-preloader.html ，我可以通过两种方式查看有关此问题的信息。
First (the more flexible of the two): 首先（两者中比较灵活）：
Modify the plugin to use user-supplied units instead of pixels. 修改插件以使用用户提供的单位而不是像素。 To do this, you will need to modify two functions in the plugin, applygameiframe and showgame . 为此，您将需要修改插件中的两个函数applygameiframe和showgame 。
applygameiframe should be changed to: 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 should be changed to: showgame应该更改为：
var showgame = function() {
var ac = '#' + settings.adframe;
var game = '#' + settings.gameframe;
$(ac).hide();
$(game).css({
"width": settings.width,
"height": settings.height
});
};
Once those changes are made, the inline CSS should be set to whatever you supply as parameters (ie, 100% , 50em , etc.). 完成这些更改后，应将内联CSS设置为您提供的任何参数（即100% ， 50em等）。
The second way (and less flexible) is to grab the window size (or the calculated height/width, whichever you're going for) and sub that in for the height/width: 第二种方法（不太灵活）是获取窗口大小（或计算出的高度/宽度，无论您要使用哪个），然后将其细分为高度/宽度：
$('#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'
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.