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 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
node+express+jade制作简单网站指南
Nov 26 Javascript
理解jquery事件冒泡
Jan 03 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
mui框架移动开发初体验详解
Oct 11 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 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
php自定文件保存session的方法
2014/12/10 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php生成Android客户端扫描可登录的二维码
2016/05/13 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
javascript动画浅析
2012/08/30 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
JS正则表达式比较常见用法
2016/01/26 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Python yield 使用浅析
2015/05/28 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python实现简单图片物体标注工具
2019/03/18 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
python 利用toapi库自动生成api
2020/10/19 Python
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
电子商务专员岗位职责
2013/12/11 职场文书
运动会解说词100字
2014/01/31 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
出生公证书
2015/01/23 职场文书
监考失职检讨书
2015/01/26 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Python基础之pandas数据合并
2021/04/27 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript