<!--Quirks Mode--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Fifty Studio│앨범 속 사진 연속 스크롤</title> <link rel="stylesheet" type="text/css" href="/tutorials/demo/css/main.css"> <!--[if IE]><style> @import url("/tutorials/demo/css/ie.css"); </style><![endif]--> <style type="text/css"> <!-- /*--CSS Code by Forestgan http://www.forest53.com--*/ a{background:#EEE; color:#333;} a:hover{background:#EEE;color: #666;} #demo ul{list-style:none;} #FGWrapper{width: 640px; margin:2em auto; background:#EEE;} #FGLeft{float: left;padding: 10px;} #FGThumb{float: right;padding: 10px 10px 10px 0;background:#EEE;} #demo{overflow:hidden; width: 130px;height: 360px; background:#eee;} #demo img {border: 0;margin-bottom: 10px;vertical-align: middle;} #FGFooter{ font-size: 1em; padding:0 10px 10px; clear:both;text-align:right;} span#FGdesc2{float: left;} --> </style> <noscript> <style type="text/css"> #demo{overflow:auto; } } </style> </noscript> <div id="ForestganWrap"> <div id="forestganHeader"> <a href="/"> <img src="/img/logo.gif" style="max-width:90%" style="max-width:90%" alt="Fifty Studio" class="logo"></a><h1> </h1>CSS 레이아웃 데모 Forestgan의 CSS 레이아웃<h2 id="demo_date"> </h2>2006년 10월 30일 출판</div> <div id="forestganMiddle"> <div id="FGWrapper"> <div id="FGLeft"> <img style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/upload/bigimg/holiday102801.jpg" alt="" id="FGplaceholder"> </div> <div id="FGThumb"> <div id="demo"> <div id="demo1"> <ul> <li> <a href="/upload/bigimg/holiday102801.jpg" onclick="return showPic(this);" title="My Photo 1"><img style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/upload/thumb/holiday102801s.jpg" alt=""></a> </li> <li> <a href="/upload/bigimg/holiday102802.jpg" onclick="return showPic(this);" title="My Photo 2"><img style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/upload/thumb/holiday102802s.jpg" alt=""></a> </li> <li> <a href="/upload/bigimg/holiday102806.jpg" onclick="return showPic(this);" title="My Photo 3"><img style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/upload/thumb/holiday102806s.jpg" alt=""></a> </li> <li> <a href="/upload/bigimg/holiday102809.jpg" onclick="return showPic(this);" title="My Photo 4"><img style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/upload/thumb/holiday102809s.jpg" alt=""></a> </li> <li> <a href="/upload/bigimg/holiday102810.jpg" onclick="return showPic(this);" title="My Photo 5"><img style="max-width:90%" style="max-width:90%" src="http://files.jb51.net/upload/thumb/holiday102810s.jpg" alt=""></a> </li> </ul> </div> <div id="demo2"> </div> </div> </div> <div id="FGFooter"> <span id="FGdesc2"> </span><a href="http://www.forest53.com">내 사진 1</a> </div>디자인: Forestgan</div> </div> </div> <div id="forestganFooter"> <address> <a href="http://www.forest53.com"> </a> 데모 페이지 디자인 및 제작: <a href="http://www.creativecommons.cn/">Forestgan</a> <a href="javascript:history.back()">Creative Commons License</a> 사용--저작자 표시 및 비상업적 사용 </address>이전 페이지로 돌아가기</div> <noscript> <p> </p> </noscript> <noscript> <p>Google 분석</p> </noscript> 내 통계 function showPic (whichpic) { if (document.getElementById) { document.getElementById('FGplaceholder').src = whichpic.href; if (whichpic.title) {document.getElementById('FGdesc2').childNodes[0].nodeValue = whichpic.title; } else {document.getElementById('FGdesc2').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } } //图片无间断滚动代码，兼容IE、Firefox、Opera //原脚本是IE only，来自网上，作者未知 //部分内容是由forestgan为了JS代码标准化，兼容以gecko为内核的浏览器于2006-10-30重写 //http://www.forest53.com var speed=30; var FGDemo=document.getElementById('demo'); var FGDemo1=document.getElementById('demo1'); var FGDemo2=document.getElementById('demo2'); FGDemo2.innerHTML=FGDemo1.innerHTML function Marquee1(){ if(FGDemo2.offsetHeight-FGDemo.scrollTop<=0) FGDemo.scrollTop-=FGDemo1.offsetHeight else{ FGDemo.scrollTop++ } } var MyMar1=setInterval(Marquee1,speed) FGDemo.onmouseover=function() {clearInterval(MyMar1)} FGDemo.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)} [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 _uacct = "UA-152060-1"; urchinTracker(); ]
