메인의 LINE TALK에서 표정 선택용으로 사용되고 있는 슬라이드 스크립트를 간단하게 정리한 예제입니다.

오래전에 어디선가 퍼왔던 소스인데 출처가 기억나질 않네요.

여러 브라우저에서 문제 없이 쓸 수 있도록 약간의 수정이 있었구요.

 

 풋터에 아이콘이 말해주듯이.. IE6.0이상, 파이어폭스, 크롬, 오페라, 사파리에서 정상작동됩니다.

 

빨간색 영역을 클릭하면 숨어있던 영역(파란색)이 스르륵 열리고, 다시 빨란색 영역을 클릭하거나 원하는 이미지를 선택했을때, 또는 [Close]를 클릭했을때 다시 스르륵 닫힙니다.

 

menu.html 
<!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" lang="ko" xml:lang="ko">
<head>
        <script type="text/javascript" src="menu.js"></script>
        <style>
        #divMenu{background:#F2F2F2; }
        #divMenu li{font-family:verdana;font-size:8pt;}
        </style>
</head>
<body onload="menuInit('divMenu');">
<input type="button" value="Open" onclick="Show_Menu()">
<input type="button" value="Close" onclick="Hide_Menu()">
 
<div id="divMenu" style="position:absolute; left:0px; top:50px; z-index:1; width:150px; height:70px; visibility:hidden;">
     <ul>
          <li>menu1</li>
          <li>menu2</li>
          <li>menu3</li>
     </ul>
</div>
 
</body>
</html>

14라인에서 divMenu에 style을 지정해두었는데 이걸 CSS로 빼면 IE가 아닌 다른 브라우저에선 감춰지지 않고 튀어나옵니다.

스크립트에서 style 속성(left, width, visibility)을 읽어서 처리하기 때문에 직접 레이어에 지정했지요.

 

menu.js 
var ie=document.all?1:0;
var n=document.all?0:1;
var lshow=0;
 
var move=30;
var menuSpeed=10;
var moveOnScroll=false;
var tim;
var ltop;
var oMenu;
function makeMenu(obj,nest){
        nest=(!nest) ? '':'document.'+nest+'.';
 
        this.css=(n) ? document.getElementById(obj).style:eval(obj+'.style');
 
        this.state=1;
        this.go=0;
 
        this.width=n?this.css.width.substring(0,this.css.width.length-2):eval(obj+'.offsetWidth');
 
        this.left=b_getleft;
        this.obj = obj + "Object";
        eval(this.obj + "=this");
}
 
function b_getleft(){
        try{
                var gleft=(n) ? eval(this.css.left.substring(0,this.css.left.length-2)):eval(this.css.pixelLeft);
                return gleft;
        }catch(ex){
                alert(ex);
                return;
        }
}
 
function moveMenu(){
        if(typeof(oMenu)!='undefined'){
                if(!oMenu.state){
                        clearTimeout(tim);
                        mIn();
                }else{
                        clearTimeout(tim);
                        mOut();
                }
        }
}
 
function mIn(){
        if(typeof(oMenu)!='undefined'){
                if(oMenu.left()>-oMenu.width+lshow){
                        oMenu.go=1;
 
                        if(oMenu.left()-move < -oMenu.width+lshow) oMenu.css.left=-oMenu.width+lshow+"px";
                        else oMenu.css.left=oMenu.left()-move+"px";
 
                        tim=setTimeout("mIn()",menuSpeed);
                }else{
                        oMenu.go=0;
                        oMenu.state=1;
                }        
        }
}
 
function mOut(){
        if(typeof(oMenu)!='undefined'){
                if(oMenu.left()<0){
                        oMenu.go=1;
 
                        if(oMenu.left()+move > 0) oMenu.css.left="0px";
                        else oMenu.css.left=oMenu.left()+move+"px";
 
                        tim=setTimeout("mOut()",menuSpeed);
                }else{
                        oMenu.go=0;
                        oMenu.state=0;
                }
        }
}
 
function checkScrolled(){
        if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop;
        if(n) setTimeout('checkScrolled()',30);
}
 
function menuInit(div_id){
        oMenu=new makeMenu(div_id);
 
        scrolled=n?"window.pageYOffset":"document.body.scrollTop";
 
        oMenu.css.left=-oMenu.width+lshow+"px";
        oMenu.css.visibility='visible';
}
  
function Show_Menu(){
        moveMenu();
}
function Hide_Menu(){
        moveMenu();
}

 

이동하는 속도를 변경하려면 6라인을, 이동간격을 변경하려면 5라인의 수치를 조절하면 됩니다.

IE에서야 괜찮지만 타브라우저에서는 레이어에 border 를 1px 이상 주게될 경우 width+border size가 총 넓이가 되기 때문에 완벽히 안가려지고 삐져나오는 현상이 나타날 수 있습니다.

테두리를 주려면 레이어 안에서 레이어의 넓이를 초과하지 않는 범위에서 잘 조절하시길...

 

이 게시물을..