jQuery 텍스트 상자 드 롭 다운 목록 시 뮬 레이 션 효과

3600 단어 jQuery 텍스트 상자 드 롭 다운 목록

웹 페이지 코드 는 다음 과 같 습 니 다: New Web Project $(document).ready(function(){ $('#test').val(''); //드 롭 다운 단추 층 을 정의 하고 스타일(위치,포 지 셔 닝 포인트 좌표,크기,배경 그림,Z 축)을 설정 합 니 다.텍스트 상자 뒤에$DIV=$('div'

').css('position','절대').css('border','1px solid\#000').css('left',$('#test').position('position','position','절대').css('border','1px solid','1px solid\##000000').css('왼쪽',$('#test').............................................ss('width', $('#test').width() + 'px').css('z-index', '100'); $('#test').after($SELECT); $SELECT.hide(); //다섯 개의 옵션 층 을 정의 하고 스타일(너비,Z 축 은 드 롭 다운 상자 보다 높 아야 합 니 다)을 설정 합 니 다.name,value 속성 을 추가 하고 드 롭 다운 상자 층 for(var i=0;i <= 5; i++) { $OPTION = $('

option' + i + '

').attr('name', 'option').attr('value', 'value' + i).css('width', $SELECT.width()).css('z-index', $SELECT.css('z-index') + 1); $SELECT.append($OPTION); }; //옵션 층 의 마우스 이동 스타일$SELECT.mouseover(function(event){if($(event.target).attr('name')=='option'){//이동 시 배경 색 이 짙 어 지고 글자 색 이 하 얗 게 변 합 니 다$(event.target).css('background-color','\#000077').css('color','white');$(event.target).mouseout(function(){//배경 색 이 하 얗 게 변 하고 글자 색 이 검 게 변 하 는$(event.target).css('background-color','\#FFFF').css('color','\#000000');});/수정 배경 그림 위치 에 마우스 로 들 어가 면$DIV.mouseover(function(){$DIV.css('background-position','0%-16px');});//배경 그림 위 치 를 수정 하려 면 마우스 로$DIV.mouseout(function(){$DIV.css('background-position','0%-0px');});//배경 그림 위 치 를 수정 하려 면 마우스 로 누 르 십시오$DIV.mousedown(function(){$DIV.css('background-position','0%-32px');});//배경 그림 위 치 를 수정 하려 면 마우스 로$DIV.mouseup(function(){$DIV.css('background-position','0%-16px');$SELECT.show(); }); //위 치 를 클릭 하여 팝 업 된 디 스 플레이$(document).mouseup(function(event){//드 롭 다운 단추 층 이나 드 롭 다운 상자 층 이 라면 드 롭 다운 상자 층 if(event.target==$SELECT.get(0)||event.target==$DIV.get(0){$SELECT.show()}을 표시 합 니 다.else{//옵션 층 이 라면 텍스트 상자 의 값 if($(event.target).attr('name')=='option'){/팝 업 value 관찰 alert($(event.target).attr('value');$('\#')test').val($(event.target).html()); } //다른 위치 라면 아래 상자 층 if($SELECT.css('display')=='block'){$SELECT.hide();}});실행 후 새로 고침 이 필요 합 니 다.jquery[Ctrl+A 전체 옵션:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]
사용 한 그림: