JS+CSS实现仿新浪微博搜索框的方法
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>JS+CSS仿类似新浪微博搜索框的效果</title> <styletype="text/css"> *{padding:0;margin:0;} body{font-size:14px;} #box{width:600px;margin:40pxauto;} #in{width:240px;height:24px;line-height:24px;border:1pxsolid#369;border-radius:4px;box-shadow:inset002px#999;} #suggest{display:none;position:relative;margin-top:-1px;width:240px;padding-top:1px;border:1pxsolid#369;border-top:0none; border-radius:4px;box-shadow:inset002px#999;overflow:hidden;} #suggesta{display:block;color:#f00;height:24px;line-height:24px;text-decoration:none;padding:04px;} #suggesta:hover{background:#eee;} #suggestaspan{color#369;} </style> <scripttype="text/javascript"> window.onload=function(){ //声明一坨变量供下面使用 varobox=document.getElementById("box"); obj=document.getElementById("in"); osug=document.getElementById("suggest"); oa=osug.getElementsByTagName("span"); //兼容ie和火狐浏览器的方式,但是经测试发现ie678可以ie9却不行在删除的时候无法触发,网上查下说有ie9这个问题 obj.oninput=obj.onpropertychange=onchange; functiononchange(){ vartxt=this.value; varwords=txt.length; if(words==0){ osug.style.display="none"; }elseif(words<=8){ osug.style.display="block"; for(vari=0;len=oa.length,i<len;i++){ oa[i].innerHTML=txt; } }elseif(words>8){ osug.style.display="block"; varlimit=txt.substring(0,8)+"..."; for(vari=0;len=oa.length,i<len;i++){ oa[i].innerHTML=limit; } } } } functiondisbox(){ document.getElementById("suggest").style.display="none"; } </script> </head> <body> <dlid="box"> <dt><inputonblur="disbox()"type="text"name=""id="in"/></dt> <ddid="suggest"> <ahref="###">搜“<span></span>”相关微博</a> <ahref="###">搜“<span></span>”相关用户</a> </dd> </dl> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。