📄 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>3</title>
<style type="text/css">
	html {
		overflow: hidden;
	}

	body {
		margin: 0px;
		padding: 0px;
		background: #000;
		position: absolute;
		width: 100%;
		height: 100%;
		cursor: crosshair;
	}

	#diapoContainer {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #222;
		overflow: hidden;
	}

	.imgDC {
		position: absolute;
		cursor: pointer;
		border: #000 solid 2px;
		filter: alpha(opacity=90);
		opacity: 0.9;
		visibility: hidden;
	}

	.spaDC {
		position: absolute;
		filter: alpha(opacity=20);
		opacity: 0.2;
		background: #000;
		visibility: hidden;
	}

	.imgsrc {
		position: absolute;
		width: 120px;
		height: 67px;
		visibility: hidden;
		margin: 4%;
	}

	#bkgcaption {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 6%;
		background:#1a1a1a;
	}
	#caption {
		position: absolute;
		font-family: arial, helvetica, verdana, sans-serif;
		white-space: nowrap;
		color: #fff;
		bottom: 0px;
		width: 100%;
		left: -10000px;
		text-align: center;
	}

</style>

<script src=main.js type="text/javascript"></script>
</head>

<body>

<div id="diapoContainer">

	<img class="imgsrc" src="conspiracy_21.jpg" alt="Reconsider your Existence">
	<img class="imgsrc" src="conspiracy_22.jpg" alt="Something Needs to be Discovered">
	<img class="imgsrc" src="conspiracy_24.jpg" alt="They Said Very Little">
	<img class="imgsrc" src="conspiracy_26.jpg" alt="Only in Your Mind">
	<img class="imgsrc" src="conspiracy_32.jpg" alt="The Power of Imagination">
	<img class="imgsrc" src="conspiracy_29.jpg" alt="Objectivity is Impossible">
	<img class="imgsrc" src="conspiracy_31.jpg" alt="Cleaning Up Operation">
	<img class="imgsrc" src="conspiracy_17.jpg" alt="Arbitrary Contents">

	<div id="bkgcaption"></div>
	<div id="caption"></div>

</div>

<script src=start.js type="text/javascript"></script>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -