Js实现放大缩小html页面整体

不包含iframe的写法
包含iframe的写法

不包含iframe的写法

html代码

<body><div ><button onclick="enlargePage()">页面放大</button><button onclick="narrowPage()">页面缩小</button></div><div>这里是页面内容......</div>
</body>

js代码

<script type="text/javascript">//网页放大缩小的变量，初始值为1var paramNumber = 1;//缩小页面function narrowPage(){//设置最小限制if(paramNumber >0.2){paramNumber -=0.1;}//缩小bodydocument.getElementsByTagName('body')[0].style.zoom=paramNumber;}//放大页面function enlargePage(){//设置最大限制if(paramNumber <5){paramNumber +=0.1;}//放大bodydocument.getElementsByTagName('body')[0].style.zoom=paramNumber;}
</script>

包含iframe的写法

html代码

主页面代码：

<body><div ><button onclick="enlargePage()">页面放大</button><button onclick="narrowPage()">页面缩小</button></div><div>这里是页面内容......</div><iframe id="iframeId" src="iframe-content.html"frameborder="0" style="min-height:200px;overflow:visible;"  ></iframe>
</body>

iframe-content.html代码：

<body>
<div>这里是iframe的内容......</div>
</body>

js代码

<script type="text/javascript">//网页放大缩小的变量，初始值为1var paramNumber = 1;//如果有iframe的话，iframe也跟随主框架大小变化$(function(){//根据id获取子iframe元素var iframe = $("#iframeId")[0];//重新加载子iframe时，每次在子iframe加载完成后，设置子iframe的bodyif (iframe.attachEvent) {iframe.attachEvent('onload', function () {document.getElementById('iframeId').contentDocument.getElementsByTagName('body')[0].style.zoom=paramNumber ;})} else {iframe.onload = function () {document.getElementById('iframeId').contentDocument.getElementsByTagName('body')[0].style.zoom=paramNumber ;}}});//缩小页面function narrowPage(){//设置最小限制if(paramNumber >0.2){paramNumber -=0.1;}//缩小bodydocument.getElementsByTagName('body')[0].style.zoom=paramNumber;document.getElementById('iframeId').contentDocument.getElementsByTagName('body')[0].style.zoom=paramNumber;}//放大页面function enlargePage(){//设置最大限制if(paramNumber <5){paramNumber +=0.1;}//放大bodydocument.getElementsByTagName('body')[0].style.zoom=paramNumber;document.getElementById('iframeId').contentDocument.getElementsByTagName('body')[0].style.zoom=paramNumber;}
</script>

Js实现放大缩小html页面整体相关推荐

js实现放大缩小页面
js实现放大缩小页面在firefox,chrom,ie11测试过可以,其它未测 <script type="text/javascript"> var size = ...
防止通过鼠标滑轮放大缩小造成页面的变形！
DIV+CSS布局中,在做顶部大Banner的时候,可以通过在body中写入 min-width: 1200px; 防止通过鼠标滑轮放大缩小造成页面的变形!
html中页面缩放为何不居中,浏览器窗口放大缩小后页面内容居中解决方法
先说下简单的思路: 1.获得窗口的大小,高度,宽度. 2.要知道显示的图片(我这里用图片举例)的大小,宽,高.(我的图片显示设置为宽:960,高600 ) 3.简单算法,获得的浏览器宽,高减去图 ...
bootstrap缩小后div互相叠加_纯 JS 实现放大缩小拖拽踩坑之旅
点击上方"前端公虾米",选择"置顶或者星标" 你的关注意义重大! 前言最近团队需要做一个智能客服悬浮窗功能,需要支持拖动.放大缩小等功能,因为这个是全局插件, ...
JS 图片放大缩小、旋转
功能描述:点击图片弹出并放大,点击弹出图片外顺时针旋转,鼠标滚动放大缩小,点击弹出图片关闭 <html> <head> <script src="https:/ ...
js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
java代码区放大_java – 放大/缩小整个页面布局
首先,让我们开始简单.缩放比较容易. (此代码未在其他示例中使用): TextView rootView; rootView.setScaleX(sx); rootView.setScaleY(sx) ...
放大/ 缩小浏览器页面（或在线网页）
问题: 在线编辑 csdn 文本,在线绘图,有时需要放大浏览器页面解决办法: 同时按 Ctrl 和+,表示放大同时按 Ctrl 和-, 表示缩小
解决浏览器放大缩小，页面随之改变大小问题
给外部选择器加个最小宽度,用在哪里都一样 min-width:1366px;

Js实现放大缩小html页面整体

Js实现放大缩小html页面整体

不包含iframe的写法

包含iframe的写法

Js实现放大缩小html页面整体相关推荐

最新文章

热门文章