这是脚本,你可以用它来制作一个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%的宽度和高度。我不知道我错过了什么或者我哪里出错了?
答案 0 :(得分:0)
假设您正在使用此插件: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'
});