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 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
javascript 闭包详解
Jul 02 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
vue购物车插件编写代码
Nov 27 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
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
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
JQuery 学习技巧总结
2010/05/21 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
浅谈Sizzle的“编译原理”
2015/04/14 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
jQuery动态生成表格及右键菜单功能示例
2017/01/13 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python使用selenium实现批量文件下载
2019/03/11 Python
int在python中的含义以及用法
2019/06/27 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
互动出版网:专业书籍
2017/03/21 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
社区八一活动方案
2014/02/03 职场文书
预备党员表决心书
2014/03/11 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
推荐信范文大全
2015/03/27 职场文书
放飞理想主题班会
2015/08/14 职场文书
企业团队精神心得体会
2016/01/19 职场文书