Select의 기본 스타일은 종종 추악합니다. 페이지의 균일 한 스타일을 보장하려면 SELECT를 아름답게해야합니다. 많은 아름다운 플러그인이 있지만 많은 것을 검색하지만 긴 CSS 파일과 JS 파일을 소개하는 것은 실제로 두통입니다. 실제로 Select의 구현 원리는 매우 간단합니다. 디스플레이, 숨기기 및 전달 값을 클릭하는 프로세스입니다. jQuery로 시뮬레이션하고 숫자를 제한하지 않고 원하는 스타일을 씁니다.
간단한 효과 :
HTML :
<div> <font> </font> <span> 옵션 1 </span> <ul> <li> 옵션 1 </li> <li> 옵션 1 </li> <li> 옵션 2 </li> <li> 옵션 3 </li> <li> </li> </ul> </div> <div> <font> </font> <pan> 옵션 1 </li> <li> 옵션 1 <li> <li> <li> <li> <li> <li> <li> <li> 3 </li> </ul> </div>
CSS :
ul {마진 : 0; 패딩 : 0; 목록 스타일 : none;}. select_box {너비 : 200px; 높이 : 36px; 테두리 : 1px 고체 #3cf; 위치 : 상대; 플로트 : 왼쪽; 마진-오른쪽 : 50px;}. select_box span {display : inline-block; 너비 : 200px; 높이 : 36px; 곡선 : 포인터; Text-Andent : 10px;}. select_box .span_aa {color :#c36;}. select_box ul {너비 : 200px; 위치 : 절대; 상단 : 36px; 왼쪽 : -1px; 테두리 : 1px 고체 #3cf; 디스플레이 : 없음; 배경 : #fff;}. select_box li {커서 : 포인터; 라인 높이 : 36px; Text-Andent : 10px;}. select_box li : 호버 {배경 :#39f; 색상 : #fff;}. select_box font {위치 : 절대; 오른쪽 : 10px; 글꼴 크기 : 26px; Font-Family : "Microsoft Yahei"; 색상 :#3CF; 변환 : 회전 (90deg);}JS :
$ (function () {var s_title = $ ( ". select_box span"); var s_select = $ ( ". select_box li"); s_title.click (function (e) {$ (this) .addclass ( "span_aa"); $ (this) .next ( "ul"); e.stoppropgation ();}); s_select.click (function () {var s_text = $ (this) .html (); var s_title_2 = $ (this) .parent ( 'ul'). prev ( "span"); s_title_2.html (s_text) .removeEclass ( "span_aa"); $ (document) .click (function () {s_title.removeclass ( "span_aa"); $ ( ". select_box ul"). hide ();});소스 코드 다운로드 : JS 선택 드롭 다운 박스 미화 다운로드
여전히 깊이있는 학습을 원한다면 jQuery 드롭 다운 박스 효과 요약 및 JavaScript 드롭 다운 상자 효과 요약을 클릭하여 학습 할 수 있습니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.