2010. 2. 17. 15:12

따라다니는 메뉴만들기.. scroll menu 스크롤메뉴


여러 스크롤 메뉴의 소스를 받아다가 실험해봤지만..
마지막으로 낙찰된거이.. 이 소스이다..

흠.. ie전 버젼에서도 ff,chrome에서도 무리없이 잘돌아가고..
테이블로 구성되어 있어서 다른 구성요소들과도 문제점도 없다..



 <script language=javascript>
<!--
var isDOM = (document.getElementById ? true : false);
var isIE4 = ((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? true : false);
var isNS = navigator.appName == "Netscape";

function getRef(id) {
if (isDOM) return document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return document.layers[id];
}

function getSty(id) {
x = getRef(id);
return (isNS4 ? getRef(id) : getRef(id).style);
}

var speed = 5; //작을 수록 빠름..
var fixWidth = 949; //[수정해야함]고정 픽셀

function moveRightEdge() {
var yMenuFrom, yMenuTo, yOffset;
var loopTime = 10; //1000 = 1초, 100 = 0.1초

if (isNS4) {
 yMenuFrom = _floater.top-220; //[수정해야함]
 yMenuTo = windows.pageYOffset; // 위쪽 위치
 var pWidth = window.innerHeight; //브라우져 안쪽 가로 길이
} else if (isDOM) {
 yMenuFrom = parseInt (_floater.style.top, 10)-220;//[수정해야함]
 yMenuTo = (isNS ? window.pageYOffset : ((document.documentElement.scrollTop) ? document.documentElement.scrollTop:document.body.scrollTop)); // 위쪽 위치
 var pWidth = (isNS ? window.innerWidth -14 : document.body.clientWidth);; //브라우져 안쪽 가로 길이
}

//if( pWidth > fixWidth ) _floater.style.left = (pWidth / 2 ) + ( fixWidth / 2)
_floater.style.left = fixWidth + "px";
//alert(document.documentElement.scrollTop);
if (yMenuFrom != yMenuTo) {
yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / speed);
if (yMenuTo < yMenuFrom)
yOffset = -yOffset;
if (isNS4)
_floater.top += yOffset;
else if (isDOM)
_floater.style.top = parseInt (_floater.style.top, 10) + yOffset;
}
//alert(_floater.style.top);
setTimeout ("moveRightEdge()", loopTime);
}

document.write('<div id="floater" style="left: 949px; top:220px; width:208px; height:310px; z-index:1; visibility: visible; position: absolute"> ');
document.write('<table width="208" border="0" cellpadding="0" cellspacing="0">');
document.write('<tr><td><a href="[링크할곳]booking"><img src="[링크할곳]page/images/scroll1.jpg" width="208" height="62" border="0"/></a></td></tr>');
document.write('<tr><td><a href="[링크할곳]hune"><img src="[링크할곳]page/images/scroll2.jpg"  width="208" height="52"border="0" /></a></td></tr>');
document.write('<tr><td><img src="[링크할곳]page/images/scroll3.jpg" width="208" height="81" /></td></tr>');
document.write('<tr><td><img src="[링크할곳]page/images/scroll5.jpg" width="208" height="54" /><td></tr>');
document.write('<tr><td background="images/scroll4.jpg" height="55px">&nbsp;<td></tr>');
document.write('</table>');
document.write('</div>');//[수정해야함]

//div 밑에 위치해야 한다.
//오른쪽 스크롤 스크립트 시작

if (isNS4) {
 var _floater = document["floater"];
 _floater.top = top.pageYOffset;
 _floater.visibility = "visible";
 moveRightEdge();
} else if (isDOM) {
 var _floater = getRef('floater');
 _floater.style.top = (isNS ? window.pageYOffset : document.body.scrollTop);// + 100;
 _floater.style.visibility = "visible";
 moveRightEdge();
}


//-->
</script>

 <현재 잘 돌아가네...>