[推荐]令人震撼的图片展示效果-js给select设置默认值-程序博客网

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>1</title> <meta http-equiv="imagetoolbar" content="no"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; } #imageFlow { position: absolute; width: 100%; height: 80%; left: 0%; top: 10%; background: #000; } #imageFlow .diapo { position: absolute; left: -1000px; cursor: pointer; -ms-interpolation-mode: nearest-neighbor; } #imageFlow .link { border: dotted #fff 1px; margin-left: -1px; margin-bottom: -1px; } #imageFlow .bank { visibility: hidden; } #imageFlow .top { position: absolute; width: 100%; height: 40%; background: #181818; } #imageFlow .text { position: absolute; left: 0px; width: 100%; bottom: 16%; text-align: center; color: #FFF; font-family: verdana, arial, Helvetica, sans-serif; z-index: 1000; } #imageFlow .title { font-size: 0.9em; font-weight: bold; } #imageFlow .legend { font-size: 0.8em; } #imageFlow .scrollbar { position: absolute; left: 10%; bottom: 10%; width: 80%; height: 16px; z-index: 1000; } #imageFlow .track { position: absolute; left: 1%; width: 98%; height: 16px; filter: alpha(opacity=30); opacity: 0.3; } #imageFlow .arrow-left { position: absolute; } #imageFlow .arrow-right { position: absolute; right: 0px; } #imageFlow .bar { position: absolute; height: 16px; left: 25px; } </head> <body> <div id="imageFlow"> <div class="top"></div> <div class="bank"> My identity lies in not knowing who I am ...are made by not following instructions ...can come between us Here you come! They don't know all the facts yet Emotional intimacy ...remains to be done before we can announce our total failure to make any progress Errare Programma Est There's no such thing I抦 now trapped, without hope of escape or rescue The World is flat 1 l0v3 j00 - f0r3v3r 111 111 111 x 111 111 111 = 12345678987654321 ...has not been written yet </div> <div class="text"> <div class="title">Loading</div> <div class="legend">Please wait...</div> </div> <div class="scrollbar"> <img class="track" src="http://preview.zcool.com.cn/code/js/04/1/sb.gif" alt=""> <img class="arrow-left" src="http://preview.zcool.com.cn/code/js/04/1/sl.gif" alt=""> <img class="arrow-right" src="http://preview.zcool.com.cn/code/js/04/1/sr.gif" alt=""> <img class="bar" src="http://preview.zcool.com.cn/code/js/04/1/sc.gif" alt=""> </div> </div> </body> </html>

提示：您可以先修改部分代码再运行

下载地址已修正：http://downsc.zcool.com.cn/code/js/04_images_box_zcool.com.cn.rar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>2</title> <meta http-equiv="imagetoolbar" content="no"> html { overflow: hidden; } body { background: #222; width: 100%; height: 100%; cursor: crosshair; } .spanSlide { position: absolute; background: #000; font-size: 1px; overflow: hidden; } .imgSlide { position: absolute; left: 5%; top: 5%; width: 90%; height: 90%; overflow: hidden; } .txtSlide { position: absolute; top: 5%; left: 50px; width:100%; color:#FFF; font-family: arial, helvetica, verdana, sans-serif; font-weight: bold; font-size:96px; letter-spacing:12px; filter: alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; } </head> <body> <div style="position:absolute;left:50%;top:50%"> <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div> <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div> <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div> </div> <div id="images" style="visibility:hidden"> <img title="infinite" src="http://preview.zcool.com.cn/code/js/04/2/pil.jpg"> <img title="yellow" src="http://preview.zcool.com.cn/code/js/04/2/cit.jpg"> <img title="earth" src="http://preview.zcool.com.cn/code/js/04/2/earth.jpg"> <img title="dream" src="http://preview.zcool.com.cn/code/js/04/2/draps.jpg"> <img title="flowers" src="http://preview.zcool.com.cn/code/js/04/2/flo.jpg"> </div> </body> </html>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>3</title> 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; } </head> <body> <div id="diapoContainer"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents"> <div id="bkgcaption"></div> <div id="caption"></div> </div> </body> </html>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>3</title> 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; } </head> <body> <div id="diapoContainer"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_21.jpg" alt="Reconsider your Existence"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_22.jpg" alt="Something Needs to be Discovered"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_24.jpg" alt="They Said Very Little"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_26.jpg" alt="Only in Your Mind"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_32.jpg" alt="The Power of Imagination"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_29.jpg" alt="Objectivity is Impossible"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_31.jpg" alt="Cleaning Up Operation"> <img class="imgsrc" src="http://preview.zcool.com.cn/code/js/04/3/conspiracy_17.jpg" alt="Arbitrary Contents"> <div id="bkgcaption"></div> <div id="caption"></div> </div> </body> </html>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>4</title> <meta http-equiv="imagetoolbar" content="no"> body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen img { position: absolute; visibility: hidden; } #screen span { position: absolute; background: #fff; cursor: pointer; visibility: hidden; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } </head> <body> <div style="position:absolute;left:50%;top:50%"> <div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000"></div> <div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden"> </div> </div> <div id="images" style="position:absolute;left:-10000px;top:-10000px;"> <img onload="setTimeout('starter();',500)" src="http://preview.zcool.com.cn/code/js/04/4/wi37.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi2.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi7.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi20.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi3.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi10.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi30.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi11.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi21.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi29.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi19.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi27.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi33.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi35.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi42.jpg"> <img src="http://preview.zcool.com.cn/code/js/04/4/wi15.jpg"> </div> </body> </html>

提示：您可以先修改部分代码再运行

本文转自
http://bbs.51js.com/thread-77249-1-1.html