js元素全屏和退出全屏效果
分类:实例代码
本章节分享一段代码实例,它实现了元素控制元素全屏和退出全屏的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .container { width: 50%; height: 300px; margin: 50px auto; } #full { width: 100%; height: 100%; position: relative; background-color: #1a85ba; background: linear-gradient(to bottom right, #00a5a5, #3366cc); color: #fff; font-size: 36px; text-align: center; line-height: 200px; } #btn { position: absolute; top: 20px; right: 20px; width: 40px; font-size: 16px; height: 24px; line-height: 24px; text-align: center; cursor: pointer; background-color: green; } #btn.active { background-color: red; } </style> <script src="demo/js/js/fullscreen.js"></script> <script> window.onload=function(){ var full=new fullscreen({ btnClass:"active", element:document.getElementById("full"), fullscreenBtn:document.getElementById("btn") }) } </script> </head> <body> <div class="container"> <div id="full"> 前端教程网 <div id="btn">全屏</div> </div> </div> </body> </html>
js元素全屏和退出全屏效果,这样的场景在实际项目中还是用的比较多的,关于js元素全屏和退出全屏效果就介绍到这了。
js元素全屏和退出全屏效果属于前端实例代码,有关更多实例代码大家可以查看。