本文實例講述了JS CSS實現仿新浪微博搜尋框的方法。分享給大家供大家參考。具體實作方法如下： 複製代碼 代碼如下: JS CSS仿類似新浪微博搜尋框的效果 <br /> * { padding:0; margin:0;}<br /> body { font-size:14px; }<br /> #box { width:600px; margin:40px auto;}<br /> #in { width:240px; height:24px; line-height:24px; border:1px solid #369; border-radius:4px; box-shadow:inset 0 0 2px #999; }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> }<br /> #suggest { display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none;<br /> border-radius:4px; box-shadow:inset 0 0 2px #999; overflow:hidden; }<br /> #suggest a { display:block; color:#f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;}<br /> #suggest a:hover { background:#eee;}<br /> #suggest a span { color#369;}<br /> <br /> window.onload=function(){<br /> //宣告一坨變數供下面使用<br /> var obox=document.getElementById("box");<br /> obj=document.getElementById("in");<br /> osug=document.getElementById("suggest");<br /> oa=osug.getElementsByTagName("span");<br /> //相容於ie和火狐瀏覽器的方式，但是測試發現ie678可以ie9卻不行在刪除的時候無法觸發，網上查下說有ie9這個問題<br /> obj.oninput=obj.onpropertychange=onchange;<br /> function onchange(){<br /> var txt=this.value;<br /> var words=txt.length;<br /> if(words==0){<br /> osug.style.display="none";<br /> }else if(words<=8){<br /> osug.style.display="block";<br /> for( var i=0;len=oa.length,i<len;i ){<br /> oa[i].innerHTML=txt;<br /> }<br /> }else if(words>8){<br /> osug.style.display="block";<br /> var limit=txt.substring(0,8) "...";<br /> for( var i=0;len=oa.length,i<len;i ){<br /> oa[i].innerHTML=limit;<br /> }<br /> }<br /> }<br /> }<br /> function disbox(){<br /> document.getElementById("suggest").style.display="none";<br /> }<br /> 搜尋「」相關微博 搜尋「」相關使用者 希望本文所述對大家的javascript程式設計有所幫助。
