我正在研究一种方法，允许用户放大和缩小以调整在线课程中交互式HTML在线学习演示文稿的大小。不幸的是，我有很多限制：
我们的在线课程是在不允许HTML5的LMS/CMS中托管的。因为演示文稿是HTML5格式的，所以我唯一能让它显示在页面上的方法是通过iFrame或Object）：
我们使用的LMS仍然使用框架式布局（顶部有一个标题框架[100%宽度]，下面有两个框架[20%宽度的导航框架和80%宽度的内容框架]），因此我需要能够只针对80%宽度的主内容框架
我们的人口倾向于使用更小的屏幕，如上网本
我创建的演示文稿非常大（1022x 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，只允许学生缩放字体大小。有什么最简单的方法来添加缩放按钮，目标是整个帧，或如果所有其他失败的对象本身？
这是我当前的代码（以字体大小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>最佳答案
我通过更改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'
});
}
关于javascript - 为iFrame创建放大和缩小功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34777898/