70 lines
1.5 KiB
HTML
70 lines
1.5 KiB
HTML
<!DOCTYPE HTML>
|
||
<html lang="en-US">
|
||
<head>
|
||
<title>Shower</title>
|
||
<meta charset="UTF-8">
|
||
<link rel="stylesheet" href="styles/reset.css">
|
||
<style>
|
||
BODY {
|
||
overflow:hidden;
|
||
padding:40px 50px;
|
||
background:#666;
|
||
color:#FFF;
|
||
font:15px 'Helvetica Neue', Helvetica, Arial, sans-serif;;
|
||
}
|
||
UL {
|
||
overflow:hidden;
|
||
}
|
||
UL LI {
|
||
float:left;
|
||
padding:8px 10px 3px;
|
||
-webkit-border-radius:5px 5px 0 0;
|
||
-moz-border-radius:5px 5px 0 0;
|
||
border-radius:5px 5px 0 0;
|
||
cursor:pointer;
|
||
}
|
||
UL LI:target {
|
||
background:#000;
|
||
}
|
||
IFRAME {
|
||
width:640px;
|
||
height:480px;
|
||
border:10px solid #000;
|
||
border-radius:0 10px 10px 10px;
|
||
}
|
||
</style>
|
||
<script>
|
||
function update() {
|
||
var url = document.location,
|
||
hash = url.hash.substr(1).split('x');
|
||
frame = document.querySelector('iframe');
|
||
if(hash.length == 2) {
|
||
frame.style.width = hash[0] + 'px';
|
||
frame.style.height = hash[1] + 'px';
|
||
} else {
|
||
url.hash = '640x480';
|
||
}
|
||
}
|
||
function init() {
|
||
var links = document.querySelectorAll('ul li');
|
||
for(var i = 0, linksLength = links.length; i < linksLength; i++) {
|
||
links[i].onclick = function() {
|
||
document.location.hash = this.id;
|
||
update();
|
||
}
|
||
}
|
||
update();
|
||
}
|
||
window.onload = init;
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<ul>
|
||
<li id="640x480">640 × 480</li>
|
||
<li id="800x600">800 × 600</li>
|
||
<li id="1024x768">1024 × 768</li>
|
||
<li id="1280x1024">1280 × 1024</li>
|
||
</ul>
|
||
<iframe src="index.htm" frameborder="0"></iframe>
|
||
</body>
|
||
</html> |