Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- AC1300
- disabled
- XMLHTTP
- ajax
- ASP
- PHP GCM
- Injection
- include
- jquery 레이어
- javascript
- utf-8
- synology
- readonly
- submit
- replace
- println
- SQL Injection
- RTL88x2BU
- 크로스 컴파일
- 따라다니는 배너
- lsusb
- 커널
- euc-kr
- FileSystemObject
- jQuery
- form
- Getrows
- DS718+
- 무선랜카드
- 시놀로지
Archives
- Today
- Total
아는 것이 좋은 것이다.
[CSS] 슬라이딩 리스트 페이지 본문
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" /> <title>CSS를 이용한 펼침 슬라이딩</title> </head> <style type="text/css"> <!-- body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"Gulim"} body{ text-align:center; font-size:12px} li{ list-style:none} .rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left} .rolinList li{margin-bottom:1px;border:1px solid #DADADA} .rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer} .content{ height:150px;width:400px; background:#fff; background:#FAFAFA} .content p{ margin:12px} --> </style> <script type="text/javascript"> //<![CDATA[ window.onload = function() { rolinTab("rolin") } function rolinTab(obj) { var list = $(obj).getElementsByTagName("LI"); var state = { show:false,hidden:false,showObj:false} ; for (var i=0; i<list.length; i++) { var tmp = new rolinItem(list[i],state); if (i == 0) tmp.pShow(); } } function rolinItem(obj,state) { var speed = 0.0666; var range = 1; var interval; var tarH; var tar = this; var head = getFirstChild(obj); var content = getNextChild(head); var isOpen = false; this.pHidden = function() { if (isOpen) hidden(); } this.pShow = show; var baseH = content.offsetHeight; content.style.display = "none"; var isOpen = false; head.onmouseover = function() { this.style.background = "#EFEFEF"; } head.onmouseout = mouseout; head.onclick = function() { this.style.background = "#EFEFEF"; if (!state.show && !state.hidden) { if (!isOpen) { head.onmouseout = null; show(); } else { hidden(); } } } function mouseout() { this.style.background = "#FFF" } function show() { head.style.borderBottom = "1px solid #DADADA"; state.show = true; if (state.openObj && state.openObj != tar ) { state.openObj.pHidden(); } content.style.height = "0px"; content.style.display = "block"; content.style.overflow = "hidden"; state.openObj = tar; tarH = baseH; interval = setInterval(move,10); } function showS() { isOpen = true; state.show = false; } function hidden() { state.hidden = true; tarH = 0; interval = setInterval(move,10); } function hiddenS() { head.style.borderBottom = "none"; head.onmouseout = mouseout; head.onmouseout(); content.style.display = "none"; isOpen = false; state.hidden = false; } function move() { var dist = (tarH - content.style.height.pxToNum())*speed; if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1; content.style.height = (content.style.height.pxToNum() + dist) + "px"; if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) { clearInterval(interval); content.style.height = tarH + "px"; if (tarH != 0) { showS() } else { hiddenS(); } } } } var $ = function($) { return document.getElementById($)} ; String.prototype.pxToNum = function() { return Number(this.replace("px",""))} function getFirstChild(obj) { var result = obj.firstChild; while (!result.tagName) { result = result.nextSibling; } return result; } function getNextChild(obj) { var result = obj.nextSibling; while (!result.tagName) { result = result.nextSibling; } return result; } //]]> </script> <body> <ul class="rolinList" id="rolin"> <li> <h2>제목</h2> <div class="content"> <p>내용<br /><br /> 내용<br /> 내용<br /> 내용<br /> 내용</p> </div> </li> <li> <h2>제목</h2> <div class="content"> <p>내용<br /> 내용<br /> 내용<br /> 내용</p> </div> </li> <li> <h2>제목</h2> <div class="content"> <p>내용<br /> 내용<br /> 내용<br /> 내용</p> </div> </li> <li> <h2>제목</h2> <div class="content"> <p>내용<br /> 내용<br /> 내용<br /> 내용<br /> 내용<br /> 내용</p> </div> </li> <li> <h2>제목</h2> <div class="content"> <p>내용<br /> 내용<br /> 내용<br /> 내용</p> </div> </li> <li> <h2>제목</h2> <div class="content"> <p>내용<br /> 내용... </p> </div> </li> </ul> </body> </html>
'CSS' 카테고리의 다른 글
[CSS] IE6~9브라우저에서 CSS3사용하기(버전별 버그 해결) (0) | 2014.05.26 |
---|---|
[CSS] 해상도별 스타일 css 적용 (0) | 2014.05.26 |
[CSS] input 특정언어 지정 입력 (0) | 2014.05.10 |
[CSS] 스크롤 따라다니는 배너 (스크립트X) (1) | 2014.05.10 |
[CSS] css 버튼생성 사이트 (0) | 2014.05.10 |
Comments