Sina Weibo 검색 상자_javascript 기술을 모방하는 JS CSS 방법

이 기사의 예에서는 JS CSS를 사용하여 Sina Weibo와 같은 검색창을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

JS CSS는 Sina Weibo 검색창의 효과를 모방합니다 * { 패딩:0; 여백:0;} 본문 { 글꼴 크기:14px } #box { 너비:600px; 여백:40px 자동;} #in { 너비:240px; 줄 높이:24px; 테두리:반경:4px; 상자 그림자: 0 2px #999; #제안: 위치:상대:-1px; 너비:240px; 테두리:1px: 없음; 테두리 반경:4px; 상자 그림자:삽입 0 0 2px #999; 숨김 } #제안 {display:block; color:#f00; line-height:24px; #제안:hover { 배경:#eee;} #범위 { 색상 제안#369;} window.onload=function(){ //아래에서 사용할 변수들을 선언합니다 var obox=document.getElementById("box"); obj=document.getElementById("in"); osug=document.getElementById("제안"); oa=osug.getElementsByTagName("span"); //IE 및 Firefox 브라우저와 호환되지만 테스트 결과 ie678은 작동하지만 ie9에서는 작동하지 않는 것으로 나타났습니다. 온라인에서 확인해보니 ie9에 문제가 있다고 합니다. obj.oninput=obj.onpropertychange=onchange; 함수 onchange(){ var txt=this.value; var 단어=txt.length; if(단어==0){ osug.style.display="없음"; }else if(단어 osug.style.display="block"; for( var i=0;len=oa.length,i oa[i].innerHTML=txt; } }else if(단어>8){ osug.style.display="block"; varlimit=txt.substring(0,8) "..."; for( var i=0;len=oa.length,i oa[i].innerHTML=제한; } } } } 함수 disbox(){ document.getElementById("suggest").style.display="none"; }

' ' 관련 Weibo> 검색 & Lt; a href = "###" & gt; "& lt; 스팬 & gt; & lt;/span & gt;" 관련 사용자 검색