Line 9: | Line 9: | ||
− | + | #forward, #reverse { | |
− | + | border-radius:50%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | #one { | |
+ | position:absolute; | ||
+ | right:10%; | ||
} | } | ||
− | # | + | #two { |
− | + | position:absolute; | |
+ | right:110%; | ||
} | } | ||
− | # | + | #three { |
− | + | position:absolute; | |
− | + | right:110%; | |
− | + | ||
} | } | ||
− | + | #four { | |
− | + | position:absolute; | |
+ | right:110%; | ||
} | } | ||
+ | |||
+ | #container { | ||
+ | width:100%; | ||
+ | height:90vh; | ||
+ | position:absolute; | ||
+ | background-color:blue; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
<body> | <body> | ||
− | + | <div id = "container"> | |
− | <div | + | |
− | + | ||
<div style = "width:80%; height:80vh; background-color:green;" id = "one" class = "show"></div> | <div style = "width:80%; height:80vh; background-color:green;" id = "one" class = "show"></div> | ||
− | <div style = "width:80%; height:80vh; background-color:purple | + | <div style = "width:80%; height:80vh; background-color:purple;" id = "two" class = "show"></div> |
− | <div style = "width:80%; height:80vh; background-color:black | + | <div style = "width:80%; height:80vh; background-color:black;" id = "three" class = "show"></div> |
− | <div style = "width:80%; height:80vh; background-color:red | + | <div style = "width:80%; height:80vh; background-color:red;" id = "four" class = "show"></div> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | </center> | + | |
+ | <div style = "width:7vw; height:7vw; background-color:yellow; text-align:center; font-size:300%; position:absolute; z-index:100; left: 93%; top:50vh;" id = "forward"><div style = "height:3vw"></div>></div> | ||
+ | <div style = "width:7vw; height:7vw; background-color:yellow; text-align:center; font-size:300%; position:absolute; top:50vh; z-index:100;" id = "reverse"><div style = "height:3vw"></div><</div> | ||
+ | |||
+ | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> | ||
</body> | </body> | ||
Line 61: | Line 61: | ||
$(document).ready( | $(document).ready( | ||
function(){ | function(){ | ||
− | + | var n = 2; | |
$("#forward").click(function () { | $("#forward").click(function () { | ||
n = n+1; | n = n+1; | ||
Line 76: | Line 76: | ||
$("#four").css('display', 'none'); } | $("#four").css('display', 'none'); } | ||
else if (n==3) { | else if (n==3) { | ||
− | $('#two'). | + | $('#two').animate({'right':'10%'}, 500); |
− | $("#one"). | + | $("#one").animate({'left':'110%'}, 500); |
$("#three").css('display', 'none'); | $("#three").css('display', 'none'); | ||
$("#four").css('display', 'none');} | $("#four").css('display', 'none');} |
Revision as of 17:31, 15 August 2016
>
<