iframe+js实现页面全屏、淡入淡出切换

时间：2022-12-03 15:46:47

index.html

Html代码  iframe+js实现页面全屏、淡入淡出切换
  1. <html>  
  2. <head>  
  3. <script   type="text/javascript">  
  4. //实现全屏  
  5. function Fkey(){  
  6.      var WsShell = new ActiveXObject('WScript.Shell')  
  7.      WsShell.SendKeys('{F11}');  
  8. }  
  9.   
  10.   
  11. //判断浏览器类型  
  12. var Sys = {};  
  13. var ua = navigator.userAgent.toLowerCase();  
  14. var s;  
  15. (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :  
  16. (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :  
  17. (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :  
  18. (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :  
  19. (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;  
  20.   
  21. //被嵌入的页面路径列表  
  22. var page_links=new Array("1.html",  
  23.                          "2.html",  
  24.                          "3.html");  
  25. var page_now=0;//表示当前显示的页面  
  26.   
  27. //淡入淡出效果  
  28. var opacity=0;  
  29. function addOpacity(){  
  30.   opacity+=10;  
  31.   document.body.style.filter="alpha(opacity="+opacity+")";  
  32.   document.body.style.opacity=opacity/100;  
  33.   if(opacity<100)setTimeout(function(){addOpacity();},30);  
  34. }  
  35.   
  36.   
  37. //更改iframe中页面，淡入淡出效果  
  38. function decOpacity(url){  
  39.    opacity=0;  
  40.    addOpacity();  
  41.    document.getElementById('ifr').src=url;  
  42. }  
  43.   
  44. //键盘上按键按下时调用该函数  
  45. function jumpPage(e) {  
  46.   
  47.   var keycode_now;  
  48.   if (Sys.ie){  
  49.       if (event.keyCode==37) {keycode_now = 37;}  
  50.       else if (event.keyCode==39) {keycode_now = 39;}  
  51.   }  
  52.   else if (Sys.firefox){  
  53.       var keycode = e.which;  
  54.       if (keycode==37) {keycode_now = 37;}  
  55.       else if (keycode==39) {keycode_now = 39;}  
  56.   }  
  57.   
  58.   if (keycode_now==37) {  
  59.           if(page_now>0){  
  60.               page_nowpage_now = page_now-1;  
  61.           }else{  
  62.               page_now = page_links.length-1;  
  63.           }  
  64.   }  
  65.   else if (keycode_now==39) {  
  66.           if(page_now<page_links.length-1){  
  67.               page_nowpage_now = page_now+1;  
  68.           }else{  
  69.               page_now = 0;  
  70.           }  
  71.   }  
  72.   
  73.   decOpacity(page_links[page_now]);  
  74. }  
  75.   
  76. //键盘上按键在iframe中按下时调用该函数，  
  77. function jumpPage_child(keycode_now) {  
  78.   if (keycode_now==37) {  
  79.           if(page_now>0){  
  80.               page_nowpage_now = page_now-1;  
  81.           }else{  
  82.               page_now = page_links.length-1;  
  83.           }  
  84.   }  
  85.   else if (keycode_now==39) {  
  86.           if(page_now<page_links.length-1){  
  87.               page_nowpage_now = page_now+1;  
  88.           }else{  
  89.               page_now = 0;  
  90.           }  
  91.   }  
  92.   decOpacity(page_links[page_now]);  
  93. }  
  94. //键盘上按键按下时调用函数jumpPage  
  95. document.onkeydown=jumpPage;  
  96. </script>  
  97.   
  98. </head>  
  99. <style type="text/css"> body{filter:alpha(opacity=80);-moz-opacity:0.8;border:0px solid red;}</style>  
  100.   
  101. <body onload="javascript:document.all.ifr.height=document.body.clientHeight;"    
  102.       topmargin="0"   
  103.       marginwidth="0"   
  104.       marginheight="0"  
  105.       scroll="no"  
  106.       style="overflow-y:hidden;">  
  107.   
  108. <div style="background:#EEE;  
  109.             font-color:#666666;  
  110.             font-size:12px;  
  111.             width=100%;  
  112.             margin:0;  
  113.             padding:0;  
  114.             cellspacing:0;  
  115.             height:26px;  
  116.             line-height:26px;  
  117.             text-align:center;  
  118.             border:0px solid blue;">  
  119. <a href="#" onclick="javascript:decOpacity(page_links[0]);">1.html</a>  
  120. <a href="#" onclick="javascript:decOpacity(page_links[1]);">2.html</a>  
  121. <a href="#" onclick="javascript:decOpacity(page_links[2]);">3.html</a>  
  122. </div>  
  123.   
  124. <iframe id="ifr"   
  125.         name="ifr"   
  126.         src="1.html"   
  127.         style="height:100%;width:100%;border:0px solid blue;margin:0;padding:0;"  
  128.         frameborder=no>  
  129. </iframe>  
  130. <script>  
  131. Fkey();  
  132. addOpacity();  
  133. </script>  
  134.   
  135. </body>  
  136. </html>  

 1.html

Html代码  iframe+js实现页面全屏、淡入淡出切换
  1. <html>  
  2. <head>  
  3. <script   type="text/javascript">  
  4. function callParent() {  
  5. try{  
  6.   var keycode_now;  
  7.   if (parent.Sys.ie){  
  8.       if (event.keyCode==37) {keycode_now = 37;}  
  9.       else if (event.keyCode==39) {keycode_now = 39;}  
  10.   }  
  11.   else if (parent.Sys.firefox){  
  12.       var keycode = e.which;  
  13.       if (keycode==37) {keycode_now = 37;}  
  14.       else if (keycode==39) {keycode_now = 39;}  
  15.   }  
  16.    parent.jumpPage_child(keycode_now);  
  17. }catch(e){alert(e.message);}  
  18. }  
  19.   
  20. document.onkeydown=callParent;  
  21.   
  22. </script>  
  23.   
  24. <body style="background-color:#ddd;font-size:30px;text-align:center;">  
  25. this is  1.html  
  26. </body>  
  27. </html>  

 2.html

Html代码  iframe+js实现页面全屏、淡入淡出切换
  1. <html>  
  2. <head>  
  3. <script   type="text/javascript">  
  4. function callParent() {  
  5. try{  
  6.   var keycode_now;  
  7.   if (parent.Sys.ie){  
  8.       if (event.keyCode==37) {keycode_now = 37;}  
  9.       else if (event.keyCode==39) {keycode_now = 39;}  
  10.   }  
  11.   else if (parent.Sys.firefox){  
  12.       var keycode = e.which;  
  13.       if (keycode==37) {keycode_now = 37;}  
  14.       else if (keycode==39) {keycode_now = 39;}  
  15.   }  
  16.    parent.jumpPage_child(keycode_now);  
  17. }catch(e){alert(e.message);}  
  18. }  
  19.   
  20. document.onkeydown=callParent;  
  21.   
  22. </script>  
  23.   
  24. <body style="background-color:#dd2;font-size:30px;text-align:center;">  
  25. this is 2.html  
  26. </body>  
  27. </html>  

 3.html

Html代码  iframe+js实现页面全屏、淡入淡出切换
  1. <html>  
  2. <head>  
  3. <script   type="text/javascript">  
  4. function callParent() {  
  5. try{  
  6.   var keycode_now;  
  7.   if (parent.Sys.ie){  
  8.       if (event.keyCode==37) {keycode_now = 37;}  
  9.       else if (event.keyCode==39) {keycode_now = 39;}  
  10.   }  
  11.   else if (parent.Sys.firefox){  
  12.       var keycode = e.which;  
  13.       if (keycode==37) {keycode_now = 37;}  
  14.       else if (keycode==39) {keycode_now = 39;}  
  15.   }  
  16.    parent.jumpPage_child(keycode_now);  
  17. }catch(e){alert(e.message);}  
  18. }  
  19.   
  20. document.onkeydown=callParent;  
  21.   
  22. </script>  
  23.   
  24. <body style="background-color:#dfe;font-size:30px;text-align:center;">  
  25. this is 3.html  
  26. </body>  
  27. </html>  
标签：

相关文章