📄 index.html

📁 10款图片展示类的JavaScript代码
💻 HTML
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>5</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #000;
		position: absolute;
		width: 100%;
		height: 100%;
		cursor: crosshair;
	}
	#box {
		position: absolute;
		background: #111;
		border: gray solid 1px;
		visibility: hidden;
	}
	#screen {
		position: absolute;
		left: 0px;
		width: 100%;
		top: 10%;
		height: 80%;
		background: #000;
		border: gray solid 1px;
	}
	#box img  {
		position: absolute;
		border: gray solid 1px;
		cursor: pointer;
	}
	#box span {
		position: absolute;
		color: #ccc;
		font-family: verdana;
		font-size: 12px;
		width: 200px;
	}
	#box a {
		text-decoration: none;
		color:#ff8000;
	}
	#box a:hover	{
		text-decoration: none;
		background:#ff8000;
		color:#ffffff;
	}
	#box a:visited {
		text-decoration: none;
		color:#ff8000;
	}
	#box a:visited:hover {
		text-decoration: none;
		background:#ff8000;
		color:#ffffff;
	}
	#lnk {
		visibility: hidden;
	}
</style>
<script src=head.js type="text/javascript">
</script>
</head>
<body>
<div id="screen">
	<div id="box"">
		<img src="newborn.jpg" title="explain" alt="They explained a little about what they were doing.">
		<img src="majesty.jpg" title="strain" alt="I hoped I wouldn′t crack under the strain.">
		<img src="whitemagic.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position.">
		<img src="gazebo2k3.jpg" title="mundane" alt="I observed the face of power at its most mundane.">
		<img src="pyre.jpg" title="inhumane" alt="But they couldn′t hide the very worst of their inhumane undertakings from the people.">
		<img src="singularity.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">
		<img src="spellcraft.jpg" title="never again" alt="Never more. Never again.">
		<span id="txt"></span>
		<span id="tit"></span>
		<span id="lnk">
			<a href="http://www.dhteumeuleu.com">www.dhteumeuleu.com</a>
			<a></a>
			<a></a>
			<a></a>
			<a></a>
			<a></a>
			<a></a>
		</span>
	</div>
</div>

<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->
<span id="LB0" style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">Loading...</span>
<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333"><span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF"></span></span></span>
<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>
<!-- end of images_loading_bar code -->

</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -