MapVGL

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MapVGL</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <style type="text/css"> html, body { margin: 0; padding: 0; } .box-group { overflow: hidden; } .category { font-size: 24px; color: #6B6B6B; padding: 8px; /* background: #fff; border-left: 4px solid #F5533D; */ margin-top: 20px; margin-bottom: 20px; margin-left: 30px; } .category .english { font-size: 20px; margin-left: 10px; color: #999; font-weight: bold; } .box { height: 240px; border-radius: 5px; overflow: hidden; width: 307px; position: relative; margin-left: 30px; margin-right: 0; margin-bottom: 30px; cursor: pointer; background: #FFF; border: 1px solid #E9E9E9; box-sizing: border-box; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); float: left; } .pic { transition: background-size 1s; height: 190px; background-size: 307px 190px; background-position: center center; background-color: #efefef; } .text { text-align: left; padding-left: 10px; font-size: 15px; color: #333; letter-spacing: .17px; line-height: 50px; } a.index:hover .box { box-shadow: 0 0 10px #ccc; } a.index:hover .pic { background-size: 369px 228px; } .nav { position: fixed; width: 180px; float: left; background: #fff; height: 100%; } .nav-title { display: block; width: 100%; box-sizing: border-box; font-size: 14px; color: #141419; line-height: 50px; padding: 0 0 0 30px; height: 50px; position: relative; cursor: pointer; } .nav-title .icon { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; background-image: url(./images/nav/Point.png); background-size: 20px 20px; } a.nav-title .icon-Point { background-image: url(./images/nav/Point.png); } a.nav-current .icon-Point, a.nav-title:hover .icon-Point { background-image: url(./images/nav/Point_h.png); } a.nav-title .icon-Line { background-image: url(./images/nav/Line.png); } a.nav-current .icon-Line, a.nav-title:hover .icon-Line { background-image: url(./images/nav/Line_h.png); } a.nav-title .icon-Other { background-image: url(./images/nav/Other.png); } a.nav-current .icon-Other, a.nav-title:hover .icon-Other { background-image: url(./images/nav/Other_h.png); } a.nav-title .icon-Cluster { background-image: url(./images/nav/Cluster.png); } a.nav-current .icon-Cluster, a.nav-title:hover .icon-Cluster { background-image: url(./images/nav/Cluster_h.png); } a.nav-title .icon-Shape { background-image: url(./images/nav/Shape.png); } a.nav-current .icon-Shape, a.nav-title:hover .icon-Shape { background-image: url(./images/nav/Shape_h.png); } a.nav-title .icon-Animation { background-image: url(./images/nav/Animation.png); } a.nav-current .icon-Animation, a.nav-title:hover .icon-Animation { background-image: url(./images/nav/Animation_h.png); } .nav-current:before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 4px; height: 50px; background: #F5533D; } .nav-current { background: rgba(245, 83, 61, .08); } a.nav-title { color: #333; text-decoration: none; } a.nav-current, a.nav-title:hover { color: #F5533D; } .page { background: #F6F7FB; overflow: hidden; } .boxcontainer { margin-left: 180px; } .english { } @media (max-width: 500px) { .nav { display: none; } .boxcontainer { margin-left: 0; } .box { width: auto; float: none; margin-left: 10px; margin-right: 10px; } } </style> <script type="text/javascript" src="./static/jquery.min.js"></script> </head> <body>  <div style="position: fixed; width: 10px; top:0; right:0; bottom:0; background: red; z-index: 10; opacity: 0"></div> <div class="page"> <div class="nav"> </div> <div class="boxcontainer"> </div> </div> <script type="text/javascript" src="js/config.js"></script> <script type="text/javascript"> /* eslint-disable */ var gridWidth = 256; // window.addEventListener('resize', resize); var data = config.demos; var html = []; var navHtml = []; for (var i = 0; i < data.length; i++) { var itemTop = data[i]; var children = itemTop.children; navHtml.push('<a href="#' + itemTop.category + '" class="nav-title"><span class="icon icon-' + itemTop.categoryEnglish + '"></span><span>' + itemTop.category + '</span></a>'); html.push('<div class="box-group" id="' + itemTop.category + '">'); html.push('<div class="category"><span>' + itemTop.category + '</span><span class="english">' + itemTop.categoryEnglish + '</span></div>'); for (var j = 0; j < children.length; j++) { var item = children[j]; html.push('<a target="_blank" class="index" href="editor.html#' + item.url + '">' + '<div class="box"><div class="pic" style="background-image:url(//mapv-website.cdn.bcebos.com/gl/examples/pics/' + item.pic + ')"></div>' + '<div class="text">' + item.name + '</div></div></a>'); } html.push('</div>'); } $('.boxcontainer').html(html.join('')); $('.nav').html(navHtml.join('')); $('.nav-title').bind('click', function() { $('.nav-title').removeClass('nav-current'); $(this).addClass('nav-current'); }); $('.nav-title:first').addClass('nav-current'); /* function resize() { var count = Math.floor($(window).width() / gridWidth); var width = $(window).width() / count; $('.box').width(width); } resize(); */ </script> <div style="display:none;"> <script> /* eslint-disable */ /* globals _hmt */ var _hmt = _hmt || []; (function () { var hm = document.createElement('script'); hm.src = '//hm.baidu.com/hm.js?0d1a62942662d252f0aea2b6f85c7f3d'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>

CINXE.COM

MapVGL