http://oxtag.com/html/ex/scroll_menu.html
<html>
<head>
<script language=JavaScript>
var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4");
var bExplorer4plus = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.substring(0,1) >= "4");
function CheckUIElements()
{
var yMenuFrom, yMenuTo, yButtonFrom, yButtonTo, yOffset, timeoutNextCheck;
//yButtonFrom = parseInt (divLinkButton.style.top, 10);
//yButtonTo = document.body.scrollTop + document.body.clientHeight - 55;
yMenuFrom = parseInt (bar.style.top, 10);
yMenuTo = document.body.scrollTop; // 위쪽 위치
timeoutNextCheck = 500;
if ( Math.abs (yButtonFrom - (yMenuTo + 152)) < 6 && yButtonTo < yButtonFrom ) {
setTimeout ("CheckUIElements()", timeoutNextCheck);
return;
}
if ( yButtonFrom != yButtonTo ) {
yOffset = Math.ceil( Math.abs( yButtonTo - yButtonFrom ) / 10 );
if ( yButtonTo < yButtonFrom )
yOffset = -yOffset;
divLinkButton.style.top = parseInt (divLinkButton.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
if ( yMenuFrom != yMenuTo ) {
yOffset = Math.ceil( Math.abs( yMenuTo - yMenuFrom ) / 20 );
if ( yMenuTo < yMenuFrom )
yOffset = -yOffset;
bar.style.top = parseInt (bar.style.top, 10) + yOffset;
timeoutNextCheck = 10;
}
setTimeout ("CheckUIElements()", timeoutNextCheck);
}
function OnLoad()
{
var y;
// 프레임 에서 벗어나게 하는 함수입니다. 프레임에 넣으려면 삭제하세요
if ( top.frames.length )
// top.location.href = self.location.href;
// 페에지 로딩시 포지션
bar.style.top = document.body.scrollTop + 135;
bar.style.visibility = "visible";
//divLinkButton.style.top = document.body.scrollTop + document.body.clientHeight - 55;
//divLinkButton.style.visibility = "visible";
// initializing UI update timer
CheckUIElements();
//if ( bExplorer4plus )
// setTimeout ( "FlashTitleStepIt(255)", 10 );
return true;
}
function funcSwapImage(imageName, bHilite) {
// DUMB Netscape doesn't see img names if they're inside a <div which has an id
// if they're just in <div></div> - it's okay, but that's not the case :\
// Workaround (using layers) was provided by Kostya. Tnx man :)
document.images[imageName].src = "images/" + imageName + (bHilite == 1 ? "_hi.gif" : "_lo.gif");
return false;
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="15" marginwidth="0" marginheight="0">
<!-- left: 0; 이 부분을 좌측이나 우측에 알맞게 수치를 수정하세요. 현재 0이니까 왼쪽에 맞춰있죠. -->
<!-- 이미지나 여러가지로 응용을 해보세요. 그럼 좀더 멋진 홈을 만들 수 있지 안을까요. -->
<div id="bar" style="position:absolute; width:10px; height:10px; z-index:1; left: 0; top: 20">
<!-- 메인메뉴의 투표 테이블 높이와 너비 지정 -->
<table border=0 width='200' cellspacing='1' cellpadding='2' bgcolor='#A8C4E2' align='center'>
<tr>
<td style='word-break:break-all;' bgcolor='white'>
</td>
</tr>
<tr>
<td height='1' bgcolor='white'>
</td>
</tr>
<tr>
<td width='100%' style='word-break:break-all;' bgcolor='white'>
<table border='0' cellspacign='0' cellpadding='0'>
<tr>
<td><font size=1 face=verdana>1. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>2. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>3. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>4. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>5. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>6. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>7. </td>
<td></td>
</tr>
<tr>
<td><font size=1 face=verdana>8. </td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor='white'></td>
</tr>
<tr>
<td bgcolor='white' align='right'></td>
</tr>
<tr>
<td align='center'></td>
</tr>
</form>
</table>
<table border=0 width=130>
<tr><td>
</td><td align='right'>
</td></tr>
<tr><td>
</td><td align='right'>
</td></tr>
<tr><td>
</td><td align='right'>
</td></tr>
</table>
<table><tr><td>
</td></tr></table>
</div>
<SCRIPT>
OnLoad();
</SCRIPT>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
'인터넷관련' 카테고리의 다른 글
| 페이지 로딩시 트렌제이션 효과(메타태그와 비스무리) (0) | 2008.01.28 |
|---|---|
| 프레임 사용 Tip (0) | 2008.01.28 |
| 마우스 오버시 풍선 도움말(툴팁) (0) | 2008.01.28 |
| 비내리는 스크립트 (0) | 2008.01.28 |
| 타이틀바 애니메이션 효과 (0) | 2008.01.28 |
| 이미지가 위로 올라가는 소스 (0) | 2008.01.28 |
| 이쁜 핑크 빛 물방울이 내려오는 소스 (0) | 2008.01.28 |
| 마우스 따라다니는 귀여운 해바라기 (0) | 2008.01.28 |
