Forked from: kingpanda's 【UI】jqueryでマップの好きな場所へ View Diff (1) forked: 【UI】jquery‘でマップの好きな場所へ Cornelius.En Follow 2014-03-01 03:16:09 License: MIT License Fork0 Fav3 View1022 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 50 lines HTML 34 lines CSS 197 lines forked: 【UI】jquery‘でマップの好きな場所へ jQuery v1.9.1 // forked from kingpanda's "【UI】jquery‘でマップの好きな場所へ" http://jsdo.it/kingpanda/kHQVR window.onload = function() { var wrapper = document.getElementById("wrapper"); var loading = document.getElementById("loading"); wrapper.style.visibility = "visible"; loading.style.visibility = "hidden"; } window.onload = function() { var wrapper = document.getElementById("wrapper"); wrapper.style.visibility = "visible"; } $('.jp').click(function() { var jp = {"background-position":"-291px -51px",} $(".bg").css(jp); $(".title").text("Japan"); }); $('.us').click(function() { var us = {"background-position":"-641px -80px",} $(".bg").css(us); $(".title").text("US"); }); $('.au').click(function() { var au = {"background-position":"-285px -189px",} $(".bg").css(au); $(".title").text("AUSTRARIA"); }); $('.eu').click(function() { var au = {"background-position":"39px -13px",} $(".bg").css(au); $(".title").text("EUROPE"); }); $('.af').click(function() { var af = {"background-position":"29px -190px", } $(".bg").css(af); $(".title").text("AFRICA"); }); $('.sa').click(function() { var sa = {"background-position":"-727px -189px",} $(".bg").css(sa); $(".title").text("SOUTH AMERICA"); }); <div id="loading"><img src="http://jsrun.it/assets/d/K/d/E/dKdE1.gif" width="40px" height="40px"/></div> <div id="wrapper"> <div class="common_menu2"> <ul> <li><a></a></li> <li><a class="title">WORLD MAP</a></li> <li><a></a></li> </ul> </div> <div class="hr1"></div> <div class="menu"> <ul> <li><a href="#" class="jp">?</a></li> <li><a href="#" class="us">?</a></li> <li><a href="#" class="au">?</a></li> <li><a href="#" class="eu">?</a></li> <li><a href="#" class="af">?</a></li> <li><a href="#" class="sa">?</a></li> </ul> </div> <div class="bg" id="movemap"></div> <div class="hr1"></div> <div class="common_menu"> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div> <div class="hr1"></div> <footer>©kingpanda</footer> </div> forked: 【UI】jquery‘でマップの好きな場所へ * { margin: 0; padding: 0; border: 0; } body { background: #000; font: sans-serif; } #loading{color:#FFF;text-align:center; width:100%; visibility:visible; position:absolute; line-height:480px; height:480px;} @font-face { font-family: 'fontello'; src: url("http://jsrun.it/assets/g/p/e/5/gpe5y"); src: url("http://jsrun.it/assets/g/p/e/5/gpe5y") format('embedded-opentype'), url("http://jsrun.it/assets/z/Z/k/g/zZkg2") format('woff'), url("http://jsrun.it/assets/r/m/P/e/rmPey") format('truetype'), url("http://jsrun.it/assets/d/M/U/1/dMU18") format('svg'); } #wrapper{width:320px; height:480px; margin:0 auto; overflow:hidden; position:relative; visibility:hidden; } footer{color:#FFF;font-weight:bold;text-align:center;font-size:12px; width:100%; position:absolute; bottom:60px;} .bg{ width:320px; height:374px; background:url(http://jsrun.it/assets/t/t/2/n/tt2ns.jpg); background-position:center; margin:0 auto; overflow:hidden; top:53px; -webkit-transition-duration: 1s; box-shadow:inset 0 0 60px #000; } .menu{ position:absolute; top:180px; z-index:200; left:10px; } .menu ul li{ height:40px; } .menu ul li a{ width:50px; height:30px; background:rgba(50,50,50,0.6); border:solid 1px #CCCCCC; padding:10px; border-radius:20px; text-decoration:none; color:#FFf; font-weight:bold; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); } .menu ul li a:active{ background:rgba(255,255,255,0.6); } .common_menu ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #000), color-stop(0.00, #303030)); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-radial-gradient(50% 100%, circle, #303030, #000); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, radial-gradient(50% 100%, circle, #303030, #000); } .common_menu ul li{ width: 64px; border-radius: 4px; -webkit-border-radius: 4px; text-align: center; color:#111; font-weight:bold; padding-top:15px; display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } .common_menu ul li a{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu ul li:nth-child(1):before{ font-family: 'fontello'; content: 's'; font-size:24px; } .common_menu ul li:nth-child(2):before{ font-family: 'fontello'; content: 'f'; font-size:24px; } .common_menu ul li:nth-child(3):before{ font-family: 'fontello'; content: 'r'; font-size:24px; } .common_menu ul li:nth-child(4):before{ font-family: 'fontello'; content: 'p'; font-size:24px; } .common_menu ul li:nth-child(5):before{ font-family: 'fontello'; content: 'm'; font-size:24px; } .common_menu2 ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #000), color-stop(0.00, #303030)); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-radial-gradient(50% 100%, circle, #303030, #000); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, radial-gradient(50% 100%, circle, #303030, #000); } .common_menu2 ul li{ width: 64px; border-radius: 4px; -webkit-border-radius: 4px; text-align: center; color:#111; font-weight:bold; padding-top:15px; display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } .common_menu2 ul li a{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu2 ul li:nth-child(2){ width: 192px; border-radius: 4px; -webkit-border-radius: 4px; text-align: center; color:#111; font-weight:bold; padding-top:20px; display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } .common_menu2 ul li a:nth-child(2){ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu2 ul li:nth-child(1):before{ font-family: 'fontello'; content: 'm'; font-size:24px; } .common_menu2 ul li:nth-child(2):before{ font-size:24px; } .common_menu2 ul li:nth-child(3):before{ font-family: 'fontello'; content: 'p'; font-size:24px; } .hr1{ width:100%; height:1px; background:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } // forked from kingpanda's "【UI】jquery‘でマップの好きな場所へ" http://jsdo.it/kingpanda/kHQVR window.onload = function() { var wrapper = document.getElementById("wrapper"); var loading = document.getElementById("loading"); wrapper.style.visibility = "visible"; loading.style.visibility = "hidden"; } window.onload = function() { var wrapper = document.getElementById("wrapper"); wrapper.style.visibility = "visible"; } $('.jp').click(function() { var jp = {"background-position":"-291px -51px",} $(".bg").css(jp); $(".title").text("Japan"); }); $('.us').click(function() { var us = {"background-position":"-641px -80px",} $(".bg").css(us); $(".title").text("US"); }); $('.au').click(function() { var au = {"background-position":"-285px -189px",} $(".bg").css(au); $(".title").text("AUSTRARIA"); }); $('.eu').click(function() { var au = {"background-position":"39px -13px",} $(".bg").css(au); $(".title").text("EUROPE"); }); $('.af').click(function() { var af = {"background-position":"29px -190px", } $(".bg").css(af); $(".title").text("AFRICA"); }); $('.sa').click(function() { var sa = {"background-position":"-727px -189px",} $(".bg").css(sa); $(".title").text("SOUTH AMERICA"); }); <div id="loading"><img src="http://jsrun.it/assets/d/K/d/E/dKdE1.gif" width="40px" height="40px"/></div> <div id="wrapper"> <div class="common_menu2"> <ul> <li><a></a></li> <li><a class="title">WORLD MAP</a></li> <li><a></a></li> </ul> </div> <div class="hr1"></div> <div class="menu"> <ul> <li><a href="#" class="jp">?</a></li> <li><a href="#" class="us">?</a></li> <li><a href="#" class="au">?</a></li> <li><a href="#" class="eu">?</a></li> <li><a href="#" class="af">?</a></li> <li><a href="#" class="sa">?</a></li> </ul> </div> <div class="bg" id="movemap"></div> <div class="hr1"></div> <div class="common_menu"> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div> <div class="hr1"></div> <footer>©kingpanda</footer> </div> * { margin: 0; padding: 0; border: 0; } body { background: #000; font: sans-serif; } #loading{color:#FFF;text-align:center; width:100%; visibility:visible; position:absolute; line-height:480px; height:480px;} @font-face { font-family: 'fontello'; src: url("http://jsrun.it/assets/g/p/e/5/gpe5y"); src: url("http://jsrun.it/assets/g/p/e/5/gpe5y") format('embedded-opentype'), url("http://jsrun.it/assets/z/Z/k/g/zZkg2") format('woff'), url("http://jsrun.it/assets/r/m/P/e/rmPey") format('truetype'), url("http://jsrun.it/assets/d/M/U/1/dMU18") format('svg'); } #wrapper{width:320px; height:480px; margin:0 auto; overflow:hidden; position:relative; visibility:hidden; } footer{color:#FFF;font-weight:bold;text-align:center;font-size:12px; width:100%; position:absolute; bottom:60px;} .bg{ width:320px; height:374px; background:url(http://jsrun.it/assets/t/t/2/n/tt2ns.jpg); background-position:center; margin:0 auto; overflow:hidden; top:53px; -webkit-transition-duration: 1s; box-shadow:inset 0 0 60px #000; } .menu{ position:absolute; top:180px; z-index:200; left:10px; } .menu ul li{ height:40px; } .menu ul li a{ width:50px; height:30px; background:rgba(50,50,50,0.6); border:solid 1px #CCCCCC; padding:10px; border-radius:20px; text-decoration:none; color:#FFf; font-weight:bold; box-shadow: 5px 5px 5px rgba(0,0,0,0.4); } .menu ul li a:active{ background:rgba(255,255,255,0.6); } .common_menu ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #000), color-stop(0.00, #303030)); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-radial-gradient(50% 100%, circle, #303030, #000); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, radial-gradient(50% 100%, circle, #303030, #000); } .common_menu ul li{ width: 64px; border-radius: 4px; -webkit-border-radius: 4px; text-align: center; color:#111; font-weight:bold; padding-top:15px; display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } .common_menu ul li a{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu ul li:nth-child(1):before{ font-family: 'fontello'; content: 's'; font-size:24px; } .common_menu ul li:nth-child(2):before{ font-family: 'fontello'; content: 'f'; font-size:24px; } .common_menu ul li:nth-child(3):before{ font-family: 'fontello'; content: 'r'; font-size:24px; } .common_menu ul li:nth-child(4):before{ font-family: 'fontello'; content: 'p'; font-size:24px; } .common_menu ul li:nth-child(5):before{ font-family: 'fontello'; content: 'm'; font-size:24px; } .common_menu2 ul{ display: -webkit-box; width: 320px; height: 51px; margin:0 auto; background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 121, color-stop(1.00, #000), color-stop(0.00, #303030)); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, -webkit-radial-gradient(50% 100%, circle, #303030, #000); background: url(http://grad3.ecoloniq.jp/sample/img/patterns_32.png) repeat, radial-gradient(50% 100%, circle, #303030, #000); } .common_menu2 ul li{ width: 64px; border-radius: 4px; -webkit-border-radius: 4px; text-align: center; color:#111; font-weight:bold; padding-top:15px; display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } .common_menu2 ul li a{ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu2 ul li:nth-child(2){ width: 192px; border-radius: 4px; -webkit-border-radius: 4px; text-align: center; color:#111; font-weight:bold; padding-top:20px; display: block; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } .common_menu2 ul li a:nth-child(2){ display: block; width: 100%; height: 51px; border-radius: 4px; -webkit-border-radius: 4px; text-decoration: none; } .common_menu2 ul li:nth-child(1):before{ font-family: 'fontello'; content: 'm'; font-size:24px; } .common_menu2 ul li:nth-child(2):before{ font-size:24px; } .common_menu2 ul li:nth-child(3):before{ font-family: 'fontello'; content: 'p'; font-size:24px; } .hr1{ width:100%; height:1px; background:-webkit-gradient(linear, left top, right top, from(#664300), color-stop(0.4, #dec548), color-stop(0.5, #fcfab5), color-stop(0.6, #dec548), to(#664300)); } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Cornelius.Engelbrecht URLhttp://about.me/zonkiboy Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/7p5v/js"></script> animation art&design css css3 game html5_elements&api javascript jquery library&test smartphones&tablets user_interface Discussion Questions on this code? Tags animation art&design css css3 game html5_elements&api javascript jquery library&test smartphones&tablets user_interface Favorite by gameQB tajix14 tjoen