本文实例讲述了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 /> #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程序设计有所帮助。
