📄 index.htm

📁 10款图片展示类的JavaScript代码
💻 HTM
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>10</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	body {
		background: #222;
		overflow: hidden;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#screen span {
		position:absolute;
		overflow:hidden;
		border:#FFF solid 1px;
		background:#FFF;
	}
	#screen img{
		position:absolute;
		left:-32px;
		top:-32px;
		cursor: pointer;
	}
	#caption, #title{
		color: #FFF;
		font-family: georgia, 'times new roman', times, veronica, serif;
		font-size: 1em;
		text-align: center;
	}
	#caption b {
		font-size: 2em;
	}

</style>

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

<div style="position: absolute; left: 50%; top: 50%;">
	<div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;"></div>
	<div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"></div>
	<div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
		<span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im6.jpg" alt=""></span>
		<span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -8px;" src="slide-M_data/im2.jpg" alt=""></span>
		<span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im3.jpg" alt=""></span>
		<span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im4.jpg" alt=""></span>
		<span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im5.jpg" alt=""></span>
		<span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im1.jpg" alt=""></span>
		<span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im7.jpg" alt=""></span>
		<span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im18.jpg" alt=""></span>
		<span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im8.jpg" alt=""></span>
		<span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im10.jpg" alt=""></span>
		<span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im12.jpg" alt=""></span>
		<span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im17.jpg" alt=""></span>
		<span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im14.jpg" alt=""></span>
		<span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im15.jpg" alt=""></span>
		<span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im16.jpg" alt=""></span>
		<span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;"><img style="left: -11px; top: -9px;" src="slide-M_data/im9.jpg" alt=""></span>
	</div>
	<div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;"><b>carefully</b> weight the options</div>
</div>

<script type="text/javascript"><!--
// starter
load();
//-->
</script>


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

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