이미지 슬라이딩 출력
Language/JAVASCRIPT 2010. 9. 24. 13:43
<html>
<head>
<title>http://www.blueb.co.kr</title>
<style>
#dhtmlgoodies_contentBox {
height:0px;
visibility:hidden;
position:absolute;
overflow:hidden;
}
#dhtmlgoodies_content { position:relative; }
</style>
<script type="text/javascript">
var initHeight = 0;
var slidedown_direction = 1;
var slidedownContentBox = false;
var slidedownContent = false;
var slidedownActive = false;
var contentHeight = false;
var slidedownSpeed = 8; //숫자가 클수록 나타나는 속도가 빠릅니다.
var slidedownTimer = 7; // Lower value = faster script
function slidedown_showHide() {
if(initHeight==0)slidedown_direction=slidedownSpeed; else slidedown_direction = slidedownSpeed*-1;
if(!slidedownContentBox) {
slidedownContentBox = document.getElementById('dhtmlgoodies_contentBox');
slidedownContent = document.getElementById('dhtmlgoodies_content');
contentHeight = document.getElementById('dhtmlgoodies_content').offsetHeight;
}
slidedownContentBox.style.visibility='visible';
slidedownActive = true;
slidedown_showHide_start();
}
function slidedown_showHide_start() {
if(!slidedownActive)return;
initHeight = initHeight/1 + slidedown_direction;
if(initHeight <= 0) {
slidedownActive = false;
slidedownContentBox.style.visibility='hidden';
initHeight = 0;
}
if(initHeight>contentHeight) {
slidedownActive = false;
}
//slidedownContentBox.style.height = initHeight + 'px';
slidedownContentBox.style.width = initHeight + 'px';
//slidedownContent.style.top = initHeight - contentHeight + 'px';
slidedownContent.style.left = initHeight - contentHeight + 'px';
setTimeout('slidedown_showHide_start()',slidedownTimer); // Choose a lower value than 10 to make the script move faster
}
function setslidedownWidth(newWidth) {
document.getElementById('dhtmlgoodies_slidedown').style.width = newWidth + 'px';
document.getElementById('dhtmlgoodies_contentBox').style.width = newWidth + 'px';
}
</script>
</head>
<body>
<a href="#" onmouseover="slidedown_showHide();return false;" onmouseout="slidedown_showHide();return false;">여기에 마우스를 올려보아요..</a><br>
<div id="dhtmlgoodies_contentBox">
<div id="dhtmlgoodies_content">
<img src="http://www.blueb.co.kr/SRC/flash/image/12.jpg" width=300>
</div>
</div>
</body>
</html>
출처 - http://www.blueb.co.kr/
'Language > JAVASCRIPT' 카테고리의 다른 글
| 정규식 예 (0) | 2010.09.27 |
|---|---|
| 이미지 슬라이딩 출력 수정본 (0) | 2010.09.24 |
| 업로드 선택 이미지 미리 보기 (0) | 2010.09.24 |
| 다중 파일 업로드 (0) | 2010.09.24 |
| 브라우져 호환 XMLHttpRequest 객체 생성 함수 (0) | 2010.08.12 |