iframe+js实现页面全屏、淡入淡出切换
2017-05-27 16:50
1106 查看
index.html
Html代码
<html>
<head>
<script type="text/javascript">
//实现全屏
function Fkey(){
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
//判断浏览器类型
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//被嵌入的页面路径列表
var page_links=new Array("1.html",
"2.html",
"3.html");
var page_now=0;//表示当前显示的页面
//淡入淡出效果
var opacity=0;
function addOpacity(){
opacity+=10;
document.body.style.filter="alpha(opacity="+opacity+")";
document.body.style.opacity=opacity/100;
if(opacity<100)setTimeout(function(){addOpacity();},30);
}
//更改iframe中页面，淡入淡出效果
function decOpacity(url){
opacity=0;
addOpacity();
document.getElementById('ifr').src=url;
}
//键盘上按键按下时调用该函数
function jumpPage(e) {
var keycode_now;
if (Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
if (keycode_now==37) {
if(page_now>0){
page_nowpage_now = page_now-1;
}else{
page_now = page_links.length-1;
}
}
else if (keycode_now==39) {
if(page_now<page_links.length-1){
page_nowpage_now = page_now+1;
}else{
page_now = 0;
}
}
decOpacity(page_links[page_now]);
}
//键盘上按键在iframe中按下时调用该函数，
function jumpPage_child(keycode_now) {
if (keycode_now==37) {
if(page_now>0){
page_nowpage_now = page_now-1;
}else{
page_now = page_links.length-1;
}
}
else if (keycode_now==39) {
if(page_now<page_links.length-1){
page_nowpage_now = page_now+1;
}else{
page_now = 0;
}
}
decOpacity(page_links[page_now]);
}
//键盘上按键按下时调用函数jumpPage
document.onkeydown=jumpPage;
</script>
</head>
<style type="text/css"> body{filter:alpha(opacity=80);-moz-opacity:0.8;border:0px solid red;}</style>
<body onload="javascript:document.all.ifr.height=document.body.clientHeight;"
topmargin="0"
marginwidth="0"
marginheight="0"
scroll="no"
style="overflow-y:hidden;">
<div style="background:#EEE;
font-color:#666666;
font-size:12px;
width=100%;
margin:0;
padding:0;
cellspacing:0;
height:26px;
line-height:26px;
text-align:center;
border:0px solid blue;">
<a href="#" onclick="javascript:decOpacity(page_links[0]);">1.html</a>
<a href="#" onclick="javascript:decOpacity(page_links[1]);">2.html</a>
<a href="#" onclick="javascript:decOpacity(page_links[2]);">3.html</a>
</div>
<iframe id="ifr"
name="ifr"
src="1.html"
style="height:100%;width:100%;border:0px solid blue;margin:0;padding:0;"
frameborder=no>
</iframe>
<script>
Fkey();
addOpacity();
</script>
</body>
</html>
1.html
Html代码
<html>
<head>
<script type="text/javascript">
function callParent() {
try{
var keycode_now;
if (parent.Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (parent.Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}
document.onkeydown=callParent;
</script>
<body style="background-color:#ddd;font-size:30px;text-align:center;">
this is 1.html
</body>
</html>
2.html
Html代码
<html>
<head>
<script type="text/javascript">
function callParent() {
try{
var keycode_now;
if (parent.Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (parent.Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}
document.onkeydown=callParent;
</script>
<body style="background-color:#dd2;font-size:30px;text-align:center;">
this is 2.html
</body>
</html>
3.html
Html代码
<html>
<head>
<script type="text/javascript">
function callParent() {
try{
var keycode_now;
if (parent.Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (parent.Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}
document.onkeydown=callParent;
</script>
<body style="background-color:#dfe;font-size:30px;text-align:center;">
this is 3.html
</body>
</html>
Html代码
<html>
<head>
<script type="text/javascript">
//实现全屏
function Fkey(){
var WsShell = new ActiveXObject('WScript.Shell')
WsShell.SendKeys('{F11}');
}
//判断浏览器类型
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//被嵌入的页面路径列表
var page_links=new Array("1.html",
"2.html",
"3.html");
var page_now=0;//表示当前显示的页面
//淡入淡出效果
var opacity=0;
function addOpacity(){
opacity+=10;
document.body.style.filter="alpha(opacity="+opacity+")";
document.body.style.opacity=opacity/100;
if(opacity<100)setTimeout(function(){addOpacity();},30);
}
//更改iframe中页面，淡入淡出效果
function decOpacity(url){
opacity=0;
addOpacity();
document.getElementById('ifr').src=url;
}
//键盘上按键按下时调用该函数
function jumpPage(e) {
var keycode_now;
if (Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
if (keycode_now==37) {
if(page_now>0){
page_nowpage_now = page_now-1;
}else{
page_now = page_links.length-1;
}
}
else if (keycode_now==39) {
if(page_now<page_links.length-1){
page_nowpage_now = page_now+1;
}else{
page_now = 0;
}
}
decOpacity(page_links[page_now]);
}
//键盘上按键在iframe中按下时调用该函数，
function jumpPage_child(keycode_now) {
if (keycode_now==37) {
if(page_now>0){
page_nowpage_now = page_now-1;
}else{
page_now = page_links.length-1;
}
}
else if (keycode_now==39) {
if(page_now<page_links.length-1){
page_nowpage_now = page_now+1;
}else{
page_now = 0;
}
}
decOpacity(page_links[page_now]);
}
//键盘上按键按下时调用函数jumpPage
document.onkeydown=jumpPage;
</script>
</head>
<style type="text/css"> body{filter:alpha(opacity=80);-moz-opacity:0.8;border:0px solid red;}</style>
<body onload="javascript:document.all.ifr.height=document.body.clientHeight;"
topmargin="0"
marginwidth="0"
marginheight="0"
scroll="no"
style="overflow-y:hidden;">
<div style="background:#EEE;
font-color:#666666;
font-size:12px;
width=100%;
margin:0;
padding:0;
cellspacing:0;
height:26px;
line-height:26px;
text-align:center;
border:0px solid blue;">
<a href="#" onclick="javascript:decOpacity(page_links[0]);">1.html</a>
<a href="#" onclick="javascript:decOpacity(page_links[1]);">2.html</a>
<a href="#" onclick="javascript:decOpacity(page_links[2]);">3.html</a>
</div>
<iframe id="ifr"
name="ifr"
src="1.html"
style="height:100%;width:100%;border:0px solid blue;margin:0;padding:0;"
frameborder=no>
</iframe>
<script>
Fkey();
addOpacity();
</script>
</body>
</html>
1.html
Html代码
<html>
<head>
<script type="text/javascript">
function callParent() {
try{
var keycode_now;
if (parent.Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (parent.Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}
document.onkeydown=callParent;
</script>
<body style="background-color:#ddd;font-size:30px;text-align:center;">
this is 1.html
</body>
</html>
2.html
Html代码
<html>
<head>
<script type="text/javascript">
function callParent() {
try{
var keycode_now;
if (parent.Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (parent.Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}
document.onkeydown=callParent;
</script>
<body style="background-color:#dd2;font-size:30px;text-align:center;">
this is 2.html
</body>
</html>
3.html
Html代码
<html>
<head>
<script type="text/javascript">
function callParent() {
try{
var keycode_now;
if (parent.Sys.ie){
if (event.keyCode==37) {keycode_now = 37;}
else if (event.keyCode==39) {keycode_now = 39;}
}
else if (parent.Sys.firefox){
var keycode = e.which;
if (keycode==37) {keycode_now = 37;}
else if (keycode==39) {keycode_now = 39;}
}
parent.jumpPage_child(keycode_now);
}catch(e){alert(e.message);}
}
document.onkeydown=callParent;
</script>
<body style="background-color:#dfe;font-size:30px;text-align:center;">
this is 3.html
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- pdf.js使用和JS实现嵌套Iframe页面F11全屏效果
- JS实现全屏页面切换
- js代码：实现主页面滚动条随iframe里的内容自动调整
- js实现同一页面可多次调用的图片幻灯切换效果
- iframe自适应加载页面高度-js实现(转载)
- js实现同一页面可多次调用的图片幻灯切换效果
- js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
- js将iframe中控件的值传到主页面控件中的实现方法
- 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
- js调用iframe实现打印页面内容的方法
- js 读取json语言包，实现页面的双语切换
- 使用hammer.js实现移动端webAPP手势滑动切换页面
- js 能实现监听F5页面刷新子iframe 而父页面不刷新
- 使用iframe实现将四个页面合成一个页面，并可以随意切换
- JS实现父页面跳转、iframe实现整页面跳转
- Iframe 父页面与子页面相互js调用实现
- 通过WebView向html页面注入js代码，实现WebView切换白昼模式/夜间模式
- js实现页面滚动切换导航栏/点击导航栏跳转到指定位置
- jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
- velocity.js实现页面滚动切换效果