Question

我正在开发一种允许用户放大和缩小以在在线课程中调整交互式HTML电子教学演示文稿大小的方法。不幸的是，我有很多限制：

我们的在线课程托管在不允许使用HTML5的LMS / CMS中。由于演示文稿是HTML5格式，我可以在页面上显示的唯一方法是通过iFrame或Object）：
我们正在使用的LMS仍然使用框架布局（顶部有一个标题框[100％宽度]，然后是[低约20％宽度导航框架和80％宽度内容框架]下面的两个框架），所以我需要能够定位80％宽度的主要内容框架
我们的人口统计倾向于使用像上网本这样的小屏幕

我创建的演示文稿非常大（1022 x 665），因为直到现在我还不知道屏幕尺寸限制。因此，我想添加一项功能，允许学生放大和缩小内容以适应自己的屏幕尺寸。在这种情况下，似乎最好的选择是在页面上添加两个按钮（a +和 - ），学生可以使用它们。

我发现了一种可以永久收缩页面的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允许学生仅缩放FONT大小。什么是最简单的方法来添加以整个框架为目标的缩放按钮，或者是否所有其他对象本身都失败了？

这是我当前的代码（以字体大小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>

Answer 1

我是通过更改javascript中的转换和缩放值来实现的：

function ZoomiframeScale(){
  $('#iframe').css({
          'height':'280%',
          'width': '300%',
        '-ms-zoom': '0.3',
        '-moz-transform': 'scale(0.3)',
        '-moz-transform-origin': '0 0',
        '-o-transform': 'scale(0.3)',
        '-o-transform-origin':' 0 0',
        '-webkit-transform': 'scale(0.3)',
        '-webkit-transform-origin': '0 0'
});
}

和

function ZoomOutIframe(){
  $('#iframe').css({
          'height':'90%',
          'width': '95%',
        '-ms-zoom': '1',
        '-moz-transform': 'scale(1)',
        '-moz-transform-origin': '0 0',
        '-o-transform': 'scale(1)',
        '-o-transform-origin':' 0 0',
        '-webkit-transform': 'scale(1)',
        '-webkit-transform-origin': '0 0'
});
}

创建放大＆amp; iFrame的输出功能

1 个答案: