> 웹 프론트엔드 > JS 튜토리얼 > 효율적인 code_javascript 기술로 요소의 둥근 모서리를 구현할 수 있는 JS 기능

효율적인 code_javascript 기술로 요소의 둥근 모서리를 구현할 수 있는 JS 기능

WBOY
풀어 주다: 2016-05-16 19:11:25
원래의
1131명이 탐색했습니다.

지난번에 blueidea에서 요소의 둥근 모서리를 구현하는 방법을 본 적이 있는데 너무 복잡했습니다. 그래서 요소의 모서리를 자동으로 둥글게 하는 함수를 직접 작성했습니다.
데모 주소: http://longbill.cn/down/sample/roundcorner.htm
padding 값이 있는 요소에는 사용하지 말고 외부에 레이어를 두는 것이 가장 좋습니다. 자세한 내용은 데모 주소를 참조하세요. 
代码: 
함수 RoundCorner(obj,style) 

/********
웹페이지 요소에 대한 라운드 코너 기능!!
저자: Longbill
홈페이지: www.longbill.cn
******/ 
       var r = []; 
       var 스타일 = [ 
       {top:["0 5px","0 3px","0 2px","0 1px","0 1px"],bottom:["0 1px","0 1px","0 2px","0 3px","0 5px"]}, 
       {top:["0 5px","0 3px","0 2px","0 1px","0 1px "],bottom:["0px","0px","0px","0px","0px"]       }, 
       {top:["0 0 0 5px","0 0 0 3px"," 0 0 0 2px","0 0 0 1px","0 0 0 1px"], 하단:["0 1 0 0px","0 1 0 0px","0 2 0 0px","0 3 0 0px ","0 5 0 0px"]}, 
       {top:["0 5 0 0px","0 3 0 0px","0 2 0 0px","0 1 0 0px","0 1 0 0px"],bottom:["0 0 0 1px","0 0 0 1px","0 0 0 2px","0 0 0 3px","0 0 0 5px"]} 
       ]; //작성자: longbill.cn 
       if (!style || style>styles.length) style = 1; 
       스타일--; 
       var btop = styles[style].top,bbottom = styles[style].bottom; 
       obj = document.getElementById(obj); 
       (!obj) 반환인 경우; 
       var HTML = obj.innerHTML; 
       obj.innerHTML = ""; 
       for(var istop=1;istop>=0;istop--) 
       { 
             var topborder = document.createElement("b"); 
              topborder.style.display = "차단"; 
              topborder.style.height = "2px"; 
              topborder.style.BackgroundColor = (obj.parentNode.style.BackgroundColor)?obj.parentNode.style.BackgroundColor:"#FFFFFF"; 
             for(var i=0;i              { 
                   var b = document.createElement("b"); 
                    if (obj.style.BackgroundColor) 
                         b.style.BackgroundColor = obj.style.BackgroundColor; 
                    else if (obj.className) 
                        b.className = obj.className; 
                    b.style.display = "차단"; 
                    b.style.margin = (istop)?btop[i]:bbottom[i]; 
                     b.style.height = "1px"; 
                    b.style.overflow = "숨김"; 
                     b.style.width = "자동"; 
                    topborder.appendChild(b); 
             } 
              obj.appendChild(topborder); 
              if (istop) obj.innerHTML =HTML; 
       } 
}

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿