<head>
<style>
.Lower_layer {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.Upper_layer {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
body{background-color: white;}
.circle-container {
position: relative;
background-color:blue;
width: 35vw;
height: 35vw;
padding: 0;
border-radius: 50%;
list-style: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
margin: 13vw auto 0;
transition: 0.5s all;
transition-delay:0.5s;
}
.circle-container:hover{
background-color:red;
transition: 0.5s all;
position: relative;
width: 12vw;
height: 12vw;
padding: 0;
border-radius: 50%;
list-style: none;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.circle-container > * {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 6vw;
height: 6vw;
margin: -4.1vw;
}
.circle-container > *:nth-of-type(1) {
}
.circle-container > *:nth-of-type(2) {
}
.circle-container > *:nth-of-type(3) {
}
.circle-container > *:nth-of-type(4) {
}
.circle-container > *:nth-of-type(5) {
}
.circle-container > *:nth-of-type(6) {
}
.circle-container > *:nth-of-type(7) {
}
.circle-container > *:nth-of-type(8) {
}
.circle-container a {
display: block;
text-align: center;
color:black;
text-decoration: none;
border-radius: 50%;
position:absolute;
display:block;
margin: auto;
height:8vw;
width:8vw;
border-radius:50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background-color:orange;
}
.circle-container a:hover{
background-color:red;
-webkit-animation: fly4 0.5s 0s ease both;
animation: fly4 .5s 0s ease both;
}
@keyframes fly4 {
from {
transform: rotate3d(0,00,0,1080deg);
}
}
@-webkit-keyframes fly4 {
from {
-webkit-transform:rotate3d(0,000,0,0deg);
}
}
</style>
<script>
$('.circle-container').children().each(function() {
$(this).addClass('item'+($(this).index() + 1));
});
</script>
</head>
<body >
<div id="Venn">
<ul class='circle-container' >
<div style="position:absolute;margin-top:-1.75vw;margin-left:-3.75vw;font-size:2vw;text-align:center;vertical-align:middle;
">Full(100%)</div>
<li style=" font-size:1vw;
"><a style="height:10vw;width:10vw;
line-height:10vw;
-moz-transform: rotate(0deg) translate(11vw) ;
-ms-transform: rotate(0deg) translate(11vw) ;
-webkit-transform: rotate(0deg) translate(11vw) ;
transform: rotate(0deg) translate(11vw);
"
href = "javascript:void(0)" onclick = "myfuncstart1();" >Item1(24%)</a></li>
<li style="font-size:1vw"><a style="height:5vw;
width:5vw;
line-height:5vw;
-moz-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
-ms-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
-webkit-transform: rotate(45deg) translate(14.5vw) rotate(-45deg);
transform: rotate(45deg) translate(14.5vw) rotate(-45deg);"
href = "javascript:void(0)" onclick = "myfuncstart2();">Item2(10%)</a></li>
<li style="font-size:1vw"><a style="height:8vw;width:8vw;
line-height:8vw;
-moz-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
-ms-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
-webkit-transform: rotate(90deg) translateX(13vw) rotate(-90deg);
transform: rotate(90deg) translateX(13vw) rotate(-90deg);"
href = "javascript:void(0)" onclick = "myfuncstart3();">Item3(12%)</a></li>
<li style="font-size:1vw"><a style="
height:8vw;width:8vw;line-height:8vw;
-moz-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
-ms-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
-webkit-transform: rotate(135deg) translate(12.5vw) rotate(-135deg);
transform: rotate(135deg) translate(12.5vw) rotate(-135deg);"
href = "javascript:void(0)" onclick = "myfuncstart4();">Item4(12%)</a></li>
<li style="font-size:1vw"><a style="
height:7vw;width:7vw;
line-height:7vw;
-moz-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
-ms-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
-webkit-transform: rotate(180deg) translate(12.5vw) rotate(-180deg);
transform: rotate(180deg) translate(12.5vw) rotate(-180deg);"
href = "javascript:void(0)" onclick = "myfuncstart5();" >Item5(11%)</a></li>
<li style="font-size:1vw"><a style="
line-height:5vw;
height:5vw;width:5vw;
-moz-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
-ms-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
-webkit-transform: rotate(225deg) translate(9.5vw) rotate(-225deg);
transform: rotate(225deg) translate(9.5vw) rotate(-225deg);"
href = "javascript:void(0)" onclick = "myfuncstart6();">Item6(10%)</a></li>
<li style="font-size:1vw">
<a style="
height:5vw;width:5vw;
line-height:5vw;
-moz-transform: rotate(270deg) translate(9vw) rotate(-270deg);
-ms-transform: rotate(270deg) translate(9vw) rotate(-270deg);
-webkit-transform: rotate(270deg) translate(9vw) rotate(-270deg);
transform: rotate(270deg) translate(9vw) rotate(-270deg);"
href = "javascript:void(0)" onclick = "myfuncstart7();" >Item7(10%)</a></li>
<li style="font-size:1vw">
<a style="
height:6vw;width:6vw;
line-height:6vw;
-moz-transform: rotate(315deg) translate(12vw) rotate(-315deg);
-ms-transform: rotate(315deg) translate(12vw) rotate(-315deg);
-webkit-transform: rotate(315deg) translate(12vw) rotate(-315deg);
transform: rotate(315deg) translate(12vw) rotate(-315deg);"
href = "javascript:void(0)" onclick = "myfuncstart8();" >Item8(11%)</a></li>
</ul>
</div>
<!--For the pop ups */ -->
<div id="1" class="Upper_layer">
<script >
function myfuncstart1(){
document.getElementById('1').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item1</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('1').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="2" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart2(){
document.getElementById('2').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item2</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('2').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="3" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart3(){
document.getElementById('3').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item3</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('3').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="4" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart4(){
document.getElementById('4').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item4</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('4').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="5" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart5(){
document.getElementById('5').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item5</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('5').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="6" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart6(){
document.getElementById('6').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item6</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('6').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="7" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart7(){
document.getElementById('7').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item7</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('7').style.display='none';document.getElementById('fade').style.display='none'">
<center> Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
<div id="8" class="Upper_layer">
<script id="field">
{
var options = {};
$('#field').datepicker(options).focus();
}
function myfuncstart8(){
document.getElementById('8').style.display='block';
document.getElementById('fade').style.display='block'
}
</script>
<center>Information related to Item8</center>
<a href = "javascript:void(0)" onclick = "document.getElementById('8').style.display='none';document.getElementById('fade').style.display='none'">
<center>Close</center>
</a>
</div>
<div id="fade" class="Lower_layer"></div>
</div>
</body>
</html>
No comments:
Post a Comment