Js+Css 控制iframe内容自动缩放

竖屏

横屏效果

<div class="h5box">
<iframe src="http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder="0" width="1280px" height="720px"></iframe>
</div>

<script type="text/javascript">if(window.addEventListener){window.addEventListener("load",fixIframe,false);window.addEventListener("resize",fixIframe,false);
}
else{window.attachEvent("onload",fixIframe);window.attachEvent("onresize",fixIframe);
}function fixIframe(){
var box=document.querySelector(".h5box");
var frame=box.querySelector("iframe");
var screenWidth=window.outerWidth||document.documentElement.clientWidth;
var screenHeight=window.outerHeight||document.documentElement.clientHeight;
var movieWidth=parseInt(frame.width||frame.style.width);
var movieHeight=parseInt(frame.height||frame.style.height);
var vScale=screenHeight/movieHeight;
var hScale=screenWidth/movieWidth;var scale=Math.min(vScale,hScale,1);var frameLeft=movieWidth*(scale-1)/2;
var frameTop=movieHeight*(scale-1)/2;frame.style.transform="scale("+scale+")";
frame.style.webkitTransform="scale("+scale+")";
frame.style.mozTransform="scale("+scale+")";
frame.style.left=frameLeft;
frame.style.top=frameTop;
frame.style.margin="auto";
frame.style.position="relative";box.style.width="100%";
box.style.height=movieHeight*scale;
box.style.overflow="hidden";
box.style.minHeight=movieHeight*scale;
box.style.textAlign="center";
}
</script>

Js+Css 控制iframe内容自动缩放相关推荐

JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
配置eclipse编写html/js/css/jsp/java时自动提示
配置eclipse编写html/js/css/jsp/java时自动提示步骤: 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修 ...
视频直播APP源码，通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果一. 实现思路需要设置一个变量控制展开 / 收起效果提前写好最高高度的class样式,超出这个高度多余内容会隐藏只有在列表数据长度 ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示。
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclip ...
css img 等比例自动缩放
img{width: auto;height: auto;max-width: 100%;max-height: 100%; } 按父容器宽度自动缩放,并且保持图片原本的长宽比
JS与CSS实现区域内容自动左右滑动
实现功能 1.鼠标在区域内滚轮上/下滑能够实现内容左/右滑 2.内容能够自动滑动,并且在到达区域两侧后能切换方向 3.鼠标悬浮时能够停止滑动,并且此时支持滑轮操作 4.鼠标从移入变为移出时自动滑动,滑 ...
js控制iframe高度自动撑开
<iframe src="index.html" width="100%" name="" id="myiframe&quo ...
CSS控制的内容超过容器宽度后显示省略号
text-overflow:ellipsis属性在FF中是没有效果的. 同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidde ...

Js+Css 控制iframe内容自动缩放

Js+Css 控制iframe内容自动缩放相关推荐

最新文章

热门文章