forked: 【UI】jquery‘でマップの好きな場所へ

Readme
JavaScript 50 lines
HTML 34 lines
CSS 197 lines

forked: 【UI】jquery‘でマップの好きな場所へ
jQuery v1.9.1

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");
});

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)); }