万国志.html 6.4 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>搜索</title>
    <link rel="stylesheet" href="css/vendor.css">
    <link rel="stylesheet" href="js/plugins/vis/vis.min.css">
    <link rel="stylesheet" href="css/h5.css">
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html">
                    <img src="images/logo.png">
                </a>
            </div>
            <div class="navbar-collapse">
                <form class="navbar-form clearfix">
                    <div class="form-group input-group-lg">
                        <input class="form-control" type="text" placeholder="辞海云">
                        <button class="btn navbar-search-camera" type="button">
                            <div class="icon icon-camera"></div>
                        </button>
                        <button class="btn navbar-search-microphone" type="button">
                            <div class="icon icon-microphone"></div>
                        </button>
                    </div>
                    <button class="btn btn-inverse btn-lg" type="button">进入词条</button>
                    <button class="btn btn-default btn-lg" type="button">搜索词条</button>
                    <a class="btn btn-link btn-lg" type="button">搜索助手
                        <span class="icon icon-help"></span>
                    </a>
                    <div class="navbar-main-list">
                        <span class="icon icon-search-tag"></span>
                        <a href="#">语词</a>
                        <a href="#">哲学</a>
                        <a href="#">社会</a>
                        <a href="#">民族</a>
                        <a href="#">历史</a>
                        <a href="#">地理</a>
                        <a href="#">文学</a>
                        <a href="#">艺术</a>
                        <a href="#">生命</a>
                        <a href="#">农业</a>
                        <a href="#">医学</a>
                        <a href="#">科技</a>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="article">
            <img src="images/wanguozhi.png" draggable="false" usemap="#planetmap">
            <map name="planetmap">
                <area shape="rect" coords="660,365,740,410" href="万国志-1.html" target="_blank">
            </map>
        </div>
    </div>
    <footer class="footer-main">
        <div class="container">
            <p class="copyright">Copyright © 2006-2016 上海辞书出版社有限公司
                <a class="beian" href="#" target="_blank">沪ICP备12009386号-3</a>
            </p>
        </div>
    </footer>
    <script src="js/plugins/jquery.min.js"></script>
    <script src="js/vendor.js" merge="true"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.js"></script>
    <script src="js/plugins/vis/vis.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(function() {
            $('.js-album').click(function() {
                layer.open({
                    type: 1,
                    title: false,
                    shadeClose: true,
                    shade: 0.6,
                    closeBtn: false,
                    area: false,
                    content: $('.album-alert')
                });
                var mySwiper = new Swiper('.album-swiper', {
                    loop: true,
                    pagination: '.swiper-pagination',
                    paginationClickable: true
                });
            });
            //- 地球
            var option = {
                backgroundColor: '#000',
                globe: {
                    baseTexture: "./images/world.topo.bathy.200401.jpg",
                    heightTexture: "./images/world.topo.bathy.200401.jpg",
                    displacementScale: 0.04,
                    shading: 'realistic',
                    environment: './images/starfield.jpg',
                    realisticMaterial: {
                        roughness: 0.9
                    },
                    postEffect: {
                        enable: true
                    },
                    light: {
                        main: {
                            intensity: 5,
                            shadow: true
                        },
                        ambientCubemap: {
                            texture: './images/pisa.hdr',
                            diffuseIntensity: 0.2
                        }
                    }
                }
            };
            $("#map-tab").one('shown.bs.tab', function(e) {
                var chart = $("#chart-earth").get(0)
                var earth = echarts.init(chart)
                earth.setOption(option)
            })
            // tab选项卡
            $(".js-tab a").click(function(e) {
                e.preventDefault()
                $(this).tab('show')
            })
            // 显示起源
            $(".js-origin").click(function() {
                $(this).toggleClass("active").siblings().removeClass("active")
                $("#collapse").slideToggle()
            })
            // layer
            $(".js-calligraphy").click(function() {
                $(this).toggleClass("active").siblings().removeClass("active")
                if ($("#collapse").is(":visible")) $("#collapse").slideUp()
                layer.open({
                    type: 1,
                    content: $("#calligraphy"),
                    area: ['900px'],
                    title: false,
                    btn: [],
                    cancel: function() {
                        $(".js-calligraphy").removeClass("active")
                    }
                })
            })
            // 复制
            var clipboard = new Clipboard(".js-copy")
            $(".js-copy").click(function(e) {
                e.preventDefault()
                var parent = $(this).parents(".js-sec")
                var text = parent.find(".paraphrase-title").text() + "\n" + parent.find(".paraphrase-p").text()
                $(this).attr('data-clipboard-text', text)
            })
        });
    </script>
</body>
</html>