登录 注册
开源 企业版 高校版 私有云 Gitee AI NEW
扫描微信二维码支付
取消
支付完成
Watch
不关注 关注所有动态 仅关注版本发行动态 关注但不提醒动态
4 Star 8 Fork 3

北京蓝亚盒子科技有限公司 / LayaAir2.x引擎示例源码

代码 Issues 0 Pull Requests 0 Wiki 统计 流水线
服务
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目，私有仓库也完全免费 ：）
免费加入
该仓库未声明开源许可证文件（LICENSE），使用请关注具体项目描述及其代码上游依赖。
项目仓库所选许可证以仓库主分支所使用许可证为准
克隆/下载
index.html 18.15 KB
一键复制 编辑 原始数据 按行查看 历史
lzy 提交于 2021-07-14 20:08 . addGitte——lzy
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=EDGE,Chrome=1;"/>

    <meta name="viewport"

          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <meta name="description"

          content="Layabox是免费开源的HTML5引擎解决方案，产品家族中包括LayaAir引擎、LayaFlash引擎、LayaOpen开放平台、LayaMarket SDK、LayaStore嵌入式游戏商店、LayaPlayer运行器。核心引擎LayaAir性能全球领先，支持2D、3D、VR开发，支持AS3、JavaScript、TypeScript三种开发语言、LayaAirIDE让项目开发更高效。"/>

    <meta name="keywords"

          content="HTML5游戏引擎,Layabox,官方网站, 免费开源,H5引擎,HTML5引擎,性能最高,3D,VR,AS3,JavaScript,TypeScript,开发语言,LayaFlash,LayaPlayer,LayaAir,LayaOpen,LayaMarket,LayaStore,游戏引擎，工具链"/>

    <meta name="author" content="ldc.layabox.com"/>



    <title>

        LAYA_DEMO

    </title>

    <script type="text/javascript">

    let search = location.search;

    let isSearchLegal = search.includes("language") && search.includes("category") && search.includes("group") && search.includes("name");

    if (!isSearchLegal) {

        let isEnglish = navigator.language.indexOf('en') !== -1 || search.indexOf("language=en") !== -1;

        let isChinese = navigator.language.indexOf('zh') !== -1;

        if(isEnglish)

            location.search = "language=en&category=2d&group=Sprite&name=DisplayImage";

        else

            location.search = "language=zh&category=2d&group=Sprite&name=DisplayImage";

    }

    </script>



    <!--CSS-->

    <link rel="shortcut icon" href="https://official.layabox.com/public/img/favicon.ico"/>

    <link rel="bookmark" href="https://official.layabox.com/public/img/favicon.ico"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"/>

    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>

    <!--CSS laya-->

    <link rel="stylesheet" type="text/css"

          href="css/LAYA_HF.css?v=20170727"/>

    <!--CSS main-->

    <link rel="stylesheet" type="text/css"

          href="css/demo.css?v=20170728"/>



    <!--IE 兼容-->

    <!--[IF LTE IE 9]>

    <script type="text/javascript" charset="utf-8" src="https://official.layabox.com/public/js/html5.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="https://official.layabox.com/public/js/respond.min.js"></script>

    <![ENDIF]-->



    <!--JS-->

    <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>

    <!--[IF LTE IE 8]>

    <script type="text/javascript" charset="utf-8"

            src="https://official.layabox.com/public/js/jquery.ie8.min.js"></script>

    <![ENDIF]-->

    <script type="text/javascript" charset="utf-8" src="js/bootstrap.js"></script>

    <!--JS laya-->

    <script type="text/javascript" charset="utf-8"

            src="js/LAYA_HF.js?v=20170727"></script>

    <!--JS main-->

    <script type="text/javascript" charset="utf-8" src="js/ace-src-min-noconflict/ace.js" defer="defer"></script>

    <script type="text/javascript" charset="utf-8" src="js/script.js?v=1513245860" defer="defer"></script>

    <script type="text/javascript" charset="utf-8" src="js/qrCode/kaelQrcode.js" defer="defer"></script>

    <script type="text/javascript" charset="utf-8" src="js/qrCode/qrcode.js" defer="defer"></script>



    <!--WOW-->

    <script type="text/javascript" charset="utf-8" src="js/wow.js"></script>

    <script type="text/javascript" charset="utf-8">

        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {

            new WOW().init();

        }

        //初始化页面

        $(window).ready(function () {

            laya_nav('layaair');

            onLR();

            rotate();

            WH();

        });

        $(window).resize(function () {

            onLR();

            WH();

        });

    </script>

</head>



<body data-spy="srcoll"

      data-target="#laya-siderbar">

<section id="laya_content">

    <nav class="navbar navbar-default movenav">

        <div class="container-fluid">

            <div class="navbar-header">

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                        data-target="#bs-example-navbar-collapse-2" aria-expanded="false">

                    <span class="sr-only">Toggle navigation</span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">

                    <p style="padding-left: 14px;font-size: 15px;font-weight: 600;">LayaAir DEMO</p>

                </a>

            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">

                <ul class="nav navbar-nav navbar-right nav-data">

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>

                        <ul class="dropdown-menu">

                            <li><a class="list-item" href="#Sprite_DisplayImage">显示图片</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

        </div>

    </nav>

    <section id="demo">

        <div class="demo-box">

            <nav class="navbar navbar-default">

                <div class="container-fluid">

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                                data-target="#bs-example-navbar-collapse-2" aria-expanded="false">

                            <span class="sr-only">Toggle navigation</span>

                            <span class="icon-bar"></span>

                            <span class="icon-bar"></span>

                            <span class="icon-bar"></span>

                        </button>

                    </div>

                    <div>

                        <!-- Nav tabs -->

                        <ul class="nav nav-tabs" role="tablist">

                            <li role="presentation" class="demo_category"><a href="#2d_demo" aria-controls="2d_demo"

                                                                             role="tab" data-toggle="tab">2D</a></li>

                            <li role="presentation" class="demo_category"><a href="#3d_demo" aria-controls="3d_demo"

                                                                             role="tab" data-toggle="tab">3D</a></li>

                        </ul>

                        <!-- Tab panes -->

                        <div class="tab-content">

                            <div role="tabpanel" class="tab-pane active" id="2d_demo">

                                <div class="panel-group hidden-xs" id="accordion_2d" role="tablist"

                                     aria-multiselectable="true">

                                    <!-- 源元素，用于复制 -->

                                    <div class="panel panel-default">

                                        <div class="panel-heading" role="tab">

                                            <a width="200px" class="collapsednew" swich="0" role="button"

                                               data-toggle="collapse" data-parent="#accordion_2d" aria-expanded="true"

                                               aria-controls="">

                                                <h4 class="panel-title">

                                                    <div class="square"><span

                                                            class="glyphicon glyphicon-chevron-right"></span></div>

                                                    <div class="spantitle"></div>

                                                    <span class="badge"></span>

                                                </h4>

                                            </a>

                                        </div>

                                        <div class="panel-collapse collapse" role="tabpanel" aria-labelledby=""

                                             aria-expanded="true">

                                            <div class="panel-body">

                                                <div>

                                                    <ul class="nav nav-pills nav-stacked" role="tablist">

                                                        <li role="presentation">

                                                            <a href="" data-toggle="tab"></a>

                                                        </li>

                                                    </ul>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div role="tabpanel" class="tab-pane" id="3d_demo">

                                <div class="panel-group hidden-xs" id="accordion_3d" role="tablist"

                                     aria-multiselectable="true">

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </nav>

            <div class="demo-data">

                <div class="row">

                    <div class="content">

                        <h2 id="caseTitle"></h2>

                        <div class="new-tab">

                            <button class="btn btn-default" type="button" id="openInNewTabButton">

                                <img src="res/newTab.png">

                                <a href="javascript:void(0)">新标签打开</a>

                            </button>

                            <!-- <button class="btn btn-default" type="button" onclick="ViewSwf()">

                                <img src="res/swf.jpg">

                                <a href="javascript:void(0)">观看SWF</a>

                            </button> -->

                            <button class="btn btn-default" type="button" data-toggle="modal" data-target="#myModal5">

                                <img src="res/qr.png">

                                <a href="javascript:void(0)">二维码</a>

                            </button>

                        </div>

                        <iframe id="demo_frame" frameborder="0" src="h5/demo.html"></iframe>

                        <div id="descDiv"></div>

                        <div class="refLibDiv" style="height:30px">

                            <span class="refLibField">引用库：</span>

                            <p id="refLibs"></p>

                        </div>

                        <div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">

                            <ul id="myTabs" class="nav nav-tabs" role="tablist">

                                <li role="presentation">

                                    <a class="a" href="#as" id="as-tab" role="tab" data-toggle="tab" aria-controls="as"

                                       aria-expanded="true">ActionScript</a>

                                </li>

                                <li role="presentation" class="active">

                                    <a class="a ablack" href="#js" role="tab" id="js-tab" data-toggle="tab"

                                       aria-controls="js">JavaScript</a>

                                </li>

                                <li role="presentation">

                                    <a class="a" href="#ts" role="tab" id="ts-tab" data-toggle="tab" aria-controls="ts">TypeScript</a>

                                </li>

                            </ul>

                            <div class="btn-group code-control-btn-group" role="group">

                                <button type="button" class="btn" id="resetButton">

                                    <!--<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>-->

                                    <span>重置示例</span>

                                </button>

                                <button class="btn" id="showGithubCodeButton" style="margin-right: 2px;">

                                    <!--<span class="glyphicon glyphicon-cog" aria-hidden="true"></span> -->

                                    <span>查看源码</span>

                                </button>

                                <button type="button" class="btn" id="execButton" style="margin-right: 2px;">

                                    <!--<span class="glyphicon glyphicon-cog" aria-hidden="true"></span> -->

                                    <span>执行代码</span>

                                </button>

                            </div>

                            <!-- 代码编辑区 -->

                            <div id="myTabContent" class="tab-content">

                                <div role="tabpanel" class="tab-pane fade" id="as" aria-labelledby="as-tab">

                                    <pre id="asPre" class="code"></pre>

                                </div>

                                <div role="tabpanel" class="tab-pane fade in active" id="js" aria-labelledby="js-tab">

                                    <pre id="jsPre" class="code"></pre>

                                </div>

                                <div role="tabpanel" class="tab-pane fade" id="ts" aria-labelledby="ts-tab">

                                    <pre id="tsPre" class="code"></pre>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">

        <div class="modal-dialog modal-lg">

            <div class="modal-content">

                <div class="modal-header">

                    <button type="button" class="close" data-dismiss="modal">

                        <span aria-hidden="true">×</span>

                        <span class="sr-only">Close</span>

                    </button>

                    <h4 class="modal-title">扫描二维码</h4>

                </div>

                <div class="modal-body">

                    <div class="qr-ctn" id="qr"></div>

                </div>

            </div>

        </div>

    </div>

</section>

<script type="text/javascript">

    $(".text-content img").addClass("img-responsive img-rounded");

    $(".collapsednew").click(function () {

        if ($(this).attr("swich") == 0) {

            $(".collapsednew").children(".panel-title").children(".square").removeClass("squarerotate");

            $(".collapsednew").attr("swich", "0");

            $(".badge").removeClass("badgeBlue");

            $(this).attr("swich", "1");

            $(this).children(".panel-title").children(".square").addClass("squarerotate");

            $(this).children(".panel-title").children(".badge").addClass("badgeBlue");

        } else if ($(this).attr("swich") == 1) {

            $(".collapsednew").attr("swich", "0");

            $(this).children(".panel-title").children(".square").removeClass("squarerotate");

        }

    });

    $(".a").click(function () {

        $(".a").removeClass("ablack");

        $(this).addClass("ablack");

    });



    function rotate() {

        $(".panel-collapse").each(function () {

            $(this).prev(".panel-heading").children("a").attr("swich", "0");

            $(this).prev(".panel-heading").children("a").children("h4").children(".badge").removeClass("badgeBlue");

            $(this).prev(".panel-heading").children("a").children(".panel-title").children(".square").removeClass("squarerotate");

            if ($(this).height() == "0") {

                $(this).prev(".panel-heading").children("a").attr("swich", "1");

                $(this).prev(".panel-heading").children("a").children("h4").children(".badge").addClass("badgeBlue");

                $(this).prev(".panel-heading").children("a").children(".panel-title").children(".square").addClass("squarerotate");

            }

        });

    }



    function WH() {

        if ($(window).width() >= 768) {

            $("#demo").css("height", $(window).height() - 95);

            $(".demo-box").css("height", $("#demo").height());

            $("#accordion_2d").css("height", $(".demo-box").height() - 43);

            $("#accordion_3d").css("height", $(".demo-box").height() - 43);

            $(".demo-box").removeClass("demo-boxS");

            $(".demo-box").css("width", $("#demo").width() - 48);

            $(".demo-data").css("width", $(window).width() - $(".demo-box nav").width() - 60);

        }

        if ($(window).width() <= 767) {

            $("#demo").css("height", $(window).height() - 160);

            $(".demo-box").css("height", $("#demo").height() + 40);

            $("#demo").css("height", $(window).height() - 31 - 80);

            $(".demo-box").addClass("demo-boxS");

            $(".demo-box").css("width", $("#demo").width() - 30);

            $(".demo-data").css("width", "100%");

        }

        $(".panel-group").css("height", $(window).height() - 156);

    }

</script>

<script type="text/javascript">

    var 

        isFocus = false,

        url;

    function focusIframe() {

        if (demo_frame && demo_frame.contentWindow) {

            isFocus = true;

            var iframeWin = demo_frame.contentWindow;

            demo_frame.focus();

            // 用onxxx的好处是，只会注册一次

            iframeWin.onclick = function() {

                demo_frame.focus();

            }

            iframeWin.onfocus = function() {

                console.log("frame focus");

            }

            iframeWin.onblur = function() {

                console.log("frame blur");

            }

        }

    }

    // url变化，没有找到检测search变化的事件，自己写吧

    setInterval(function() {

        if (url !== location.href || !isFocus) {

            url = location.href;

            focusIframe();

        }

    }, 1000);

</script>

</body>

</html>
1
https://gitee.com/layabox/layaAir2-example.git
git@gitee.com:layabox/layaAir2-example.git
layabox
layaAir2-example
LayaAir2.x引擎示例源码
master
点此查找更多帮助

搜索帮助

Git 命令在线学习 如何在 Gitee 导入 GitHub 仓库
Git 仓库基础操作
企业版和社区版功能对比
SSH 公钥设置
如何处理代码冲突
仓库体积过大，如何减小？
如何找回被删除的仓库数据
Gitee 产品配额说明
GitHub仓库快速导入Gitee及同步更新
什么是 Release（发行版）
将 PHP 项目自动发布到 packagist.org
评论
仓库举报
回到顶部