js实现YouKu的漂亮搜索框效果

前端技术 2023/09/08 JavaScript

本文实例讲述了js实现YouKu的漂亮搜索框效果。分享给大家供大家参考。具体如下：

运行效果如下图所示：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-youku-search-style-codes/

具体代码如下：

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<HTML>
<HEAD>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<TITLE>搜索条</TITLE>
<style>
/*basic*/
*{padding:0;margin:0;color:#000;font:12px/20px Arial,Sans-serif,\"宋体\";}
/*elements*/
.clear{clear:both;height:0px;overflow:hidden;}
ul,li,ol{list-style-type:none;list-style-position:outside;}
button,.btnNormal{height:22px;line-height:18px;padding:0 9px!important;padding:0 5px;}
a{color:#0042ff;text-decoration:underline;}
a,a *{cursor:pointer;}
a img{border:0;}
.searchTool{float:left;width:520px;}
.searchTool .searchExtend{float:left;line-height:24px;_padding-top:5px;}
.searchTool .radio{vertical-align:middle;margin-left:10px;margin-right:2px;*margin-right:0;}
.searchTool .txtSearch{float:left;width:232px;padding:2px 2px 0 2px;height:20px;line-height:20px;vertical-align:bottom;border:1px solid #3e99d4;}
.searchTool .selSearch{float:left;width:60px;background:#fff;height:22px;line-height:22px;border:1px solid #3e99d4;border-left:0;}
.searchTool .nowSearch{float:left;width:40px;height:20px;line-height:22px;overflow:hidden;padding-left:4px;}
.searchTool .btnSel{float:right;border-left:1px solid #3e99d4;width:14px;height:22px;}
.searchTool .btnSel a{background:url(images/btn_sel.gif) no-repeat center center;display:block;width:14px;height:22px;}
.searchTool .btnSel a:hover{background:url(images/btn_sel_over.gif) no-repeat center center;border:1px solid #fff;width:12px;height:20px;}
.searchTool .selOption{z-index:9999;position:absolute;margin-left:-1px;width:60px;background:#fff;border:1px solid #3e99d4;}
.searchTool .selOption a{display:block;height:21px;padding-left:5px;line-height:21px;color:#000;text-decoration:none;}
.searchTool .selOption a:hover{color:#fff;background:#95d5f1;}
.searchTool .btnSearch{float:left;margin-left:10px;width:58px;height:22px;line-height:22px;border:1px solid #3e99d4;overflow:hidden;}
.searchTool .btnSearch a{background:url(images/bg_nav_option.gif) repeat-x center -6px;display:block;text-decoration:none;height:22px;line-height:22px;overflow:hidden;}
.searchTool .btnSearch a:hover{background:url(images/bg_nav_option_over.gif) repeat-x center center;border:1px solid #fff;height:20px;line-height:20px;}
.searchTool .btnSearch .lbl{cursor:pointer;display:block;width:40px;padding-left:5px;letter-spacing:5px;text-align:center;height:18px;padding-top:1px;margin:0 auto;filter:progid:DXImageTransform.Microsoft.DropShadow(color=#daeefa,offX=1,offY=1,positives=true);}
.searchTool .btnSearch a:hover .lbl{padding-top:0px;}
</style>
<script>
function drop_mouseover(pos){
 try{window.clearTimeout(timer);}catch(e){}
}
function drop_mouseout(pos){
 var posSel=document.getElementById(pos+\"Sel\").style.display;
 if(posSel==\"block\"){
 timer = setTimeout(\"drop_hide(\'\"+pos+\"\')\", 1000);
 }
}
function drop_hide(pos){
 document.getElementById(pos+\"Sel\").style.display=\"none\";
}
function search_show(pos,searchType,href){
 document.getElementById(pos+\"SearchType\").value=searchType;
 document.getElementById(pos+\"Sel\").style.display=\"none\";
 document.getElementById(pos+\"Slected\").innerHTML=href.innerHTML;
 document.getElementById(pos+\'q\').focus();
 var sE = document.getElementById(\"searchExtend\");
 if(sE != undefined && searchType == \"bar\"){
 sE.style.display=\"block\";
 }else if(sE != undefined){
 sE.style.display=\"none\";
 }
 try{window.clearTimeout(timer);}catch(e){}
 return false;
}
</script>
</HEAD>
<BODY>
<div class=\"searchTool\">
<form method=\"get\" action=\"http://so.youku.com/search_playlist\" name=\"headSearchForm\" id=\"headSearchForm\" onsubmit=\"return dosearch(this);\">
  <input class=\"txtSearch\" id=\"headq\" name=\"q\" type=\"text\" value=\"闯关东\" />
  <input name=\"searchdomain\" type=\"hidden\" value=\"http://so.youku.com\">
  <input id=\"headSearchType\" name=\"searchType\" type=\"hidden\" value=\"playlist\">
  <div class=\"selSearch\">
  <div class=\"nowSearch\" id=\"headSlected\" onclick=\"if(document.getElementById(\'headSel\').style.display==\'none\'){document.getElementById(\'headSel\').style.display=\'block\';}else {document.getElementById(\'headSel\').style.display=\'none\';};return false;\" onmouseout=\"drop_mouseout(\'head\');\">专辑</div>
  <div class=\"btnSel\"><a href=\"#\" onclick=\"if(document.getElementById(\'headSel\').style.display==\'none\'){document.getElementById(\'headSel\').style.display=\'block\';}else {document.getElementById(\'headSel\').style.display=\'none\';};return false;\" onmouseout=\"drop_mouseout(\'head\');\"></a></div>
  <div class=\"clear\"></div>
  <ul class=\"selOption\" id=\"headSel\" style=\"display:none;\">
   <li><a href=\"#\" onclick=\"return search_show(\'head\',\'video\',this)\" onmouseover=\"drop_mouseover(\'head\');\" onmouseout=\"drop_mouseout(\'head\');\">视频</a></li>
   <li><a href=\"#\" onclick=\"return search_show(\'head\',\'playlist\',this)\" onmouseover=\"drop_mouseover(\'head\');\" onmouseout=\"drop_mouseout(\'head\');\">专辑</a></li>
   <li><a href=\"#\" onclick=\"return search_show(\'head\',\'user\',this)\" onmouseover=\"drop_mouseover(\'head\');\" onmouseout=\"drop_mouseout(\'head\');\">会员</a></li>
   <li><a href=\"#\" onclick=\"return search_show(\'head\',\'bar\',this)\" onmouseover=\"drop_mouseover(\'head\');\" onmouseout=\"drop_mouseout(\'head\');\">看吧</a></li>
   <li><a href=\"#\" onclick=\"return search_show(\'head\',\'pk\',this)\" onmouseover=\"drop_mouseover(\'head\');\" onmouseout=\"drop_mouseout(\'head\');\">PK擂台</a></li>
  </ul>
  </div>
  <div class=\"btnSearch\">
  <a href=\"#\" onclick=\"javascript:return dosearch(document.getElementById(\'headSearchForm\'));\"><span class=\"lbl\">搜索</span></a>
  </div>
    <div class=\"searchExtend\" id=\"searchExtend\" name=\"searchExtend\" style=\"display:none\">
    <input type=\"radio\" class=\"radio\" name=\"sbt\" value=\"post\" onclick=\"csbt(this,this.form.sbts);\" />搜贴子<input type=\"radio\" name=\"sbt\" value=\"user\" onclick=\"csbt(this,this.form.sbts);\" class=\"radio\" />按作者搜<input type=\"hidden\" name=\"sbts\" value=\"bar\">
  </div>
    <div class=\"clear\"></div>
  </form>
  </div>
  <div class=\"clear\"></div>
 </div>
 </div>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/23255

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案