screenfull实现网页或元素全屏切换效果代码-html代码-BFW代码库

screenfull实现网页或元素全屏切换效果代码

代码语言：html

所属分类：其他

代码描述：screenfull实现网页或元素全屏切换效果代码，支持图片元素单独全屏、支持退出全屏和文档全屏。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<style>
                html {
                        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
                        padding: 30px 10px 0 0;
                        font-size: 20px;
                        line-height: 1.4;
                        color: #737373;
                        background: #f0f0f0;
                        -webkit-font-smoothing: antialiased;
                }

                hr {
                        border: none;
                        border-top: 1px solid #e6e6e6;
                        margin: 20px 0;
                }

                a {
                        color: #666;
                }

                h1 {
                        margin: 0;
                        font-size: 40px;
                        text-align: center;
                }

                h1 span {
                        color: #bbb;
                }

                ul {
                        padding: 0 0 0 40px;
                        margin: 1em 0;
                }

                button {
                        font-size: 13px;
                }

                nav {
                        margin: 0 auto;
                }

                .container {
                        width: 500px;
                        margin: 0 auto;
                }

                #repo-link {
                        text-align: center;
                        text-decoration: none;
                        display: block;
                        position: absolute;
                        top: 20px;
                        left: 20px;
                }

                #social {
                        margin: 10px auto;
                        text-align: center;
                }

                #container {
                        width: 500px;
                        padding: 30px 20px;
                        margin: 0 auto 50px auto;
                        background: #fcfcfc;
                        text-align: center;
                        border: 1px solid #b3b3b3;
                        border-radius: 4px;
                        box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
                }

                #container ul {
                        padding: 0;
                        margin: 40px 0 0 0;
                        list-style: none;
                }

                #demo-img {
                        width: 100%;
                        height: auto;
                }

                #demo-img,
                #demo-video {
                        cursor: pointer;
                }

                header p {
                        font-siz.........完整代码请登录后点击上方下载按钮下载查看