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


Posted in Javascript onAugust 19, 2015

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

运行效果如下图所示:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
jQuery EasyUI开发技巧总结
Sep 26 jQuery
深入浅析javascript继承体系
Oct 23 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
Vue全家桶入门基础教程
May 14 Vue.js
JS时间特效最常用的三款
Aug 19 #Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 #Javascript
JS模拟并美化的表单控件完整实例
Aug 19 #Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 #Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
jquery小火箭返回顶部代码分享
Aug 19 #Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 #Javascript
You might like
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
Yii2实现上下联动下拉框功能的方法
2016/08/10 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
js+canvas实现纸牌游戏
2020/03/16 Javascript
Python访问MySQL封装的常用类实例
2014/11/11 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
访谈节目策划方案
2014/05/15 职场文书
篮球比赛策划方案
2014/06/05 职场文书
会计专业自荐书
2014/07/08 职场文书
治安消防安全责任书
2014/07/23 职场文书
医院党员公开承诺书
2014/08/30 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年店长工作总结
2014/11/17 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
门卫管理制度范本
2015/08/05 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang