我正在研究一种方法,允许用户缩放在线课程中交互式 HTML eLearning 演示文稿的大小。但是,我有很多限制:
- 我们的在线课程托管在不支持 HTML5 的 LMS/CMS 上。由于演示文稿采用 HTML5 格式,所以我唯一能够使其显示在页面上的方式是通过 iFrame 或 Object)。
- 我们使用的 LMS 仍然使用框架布局(一个头部框架[100%宽度]在顶部,然后下面有两个框架[约20%宽度的导航框架和80%宽度的内容框架]),因此我需要能够仅针对占80%宽度的主要内容框架。
- 我们的受众倾向于使用像上网本这样的小屏幕。
我创建的演示文稿非常大(1022 x 665),因为我直到现在才知道屏幕尺寸的限制。因此,我想添加一项功能,允许学生调整内容以适应自己的屏幕尺寸。在这种情况下,似乎最好的选择是在页面上添加两个按钮(一个 + 和 - ),供学生使用。
我找到了一种可以永久缩小页面的 CSS 方法:
<style>
.frame
{
width: 1022px;
height: 665px;
border: 0;
overflow: hidden;
-ms-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-webkit-transform: scale(0.8);
transform: scale(0.8);
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
虽然这个方法可行,但是不允许不同屏幕尺寸的学生自定义他们的体验。
目前,我有一些JavaScript代码可以让学生仅缩放字体大小。最简单的方法是添加缩放按钮,以定位整个框架,或者在万不得已时定位对象本身。
以下是我的当前代码(以字体大小JavaScript作为起点):
<!--WEEK 6 SELF CHECK-->
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.zoomooz.min.js"></script>
<style>
.frame
{
width: 1022px;
height: 665px;
border: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="subPara" style="height: 80%;">
<input type="button" value="+" onClick="zoomIn()"/>
<input type="button" value="-" onClick="zoomOut()"/>
<p>Questions to think about as you are completing your readings:</p>
<!--Instructions for how to embed Self Checks-->
<div class="wrap">
<object class="frame" type="text/html" data="EDU8510_Week6_SelfCheck/Week6.html" style="width: 1022px; height: 675px; border: 0px;">
<embed src="EDU8510_Week6_SelfCheck/Week6.html" style="width: 645px; height: 530px; border:0;"></embed>
</object>
</div>
</div>
<script>
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.body.style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.body.style.fontSize = fontSize + "em";
}
</script>
</body>