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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
Vue实现简单分页器
Dec 29 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
微信小程序静默登录的实现代码
Jan 08 Javascript
JavaScript常用工具函数大全
May 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
DOM XPATH获取img src值的query
2013/09/23 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
存储过程和函数的区别
2013/05/28 面试题
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
什么是继承
2013/12/07 面试题
急诊科护士自我鉴定
2013/10/14 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
12岁生日感言
2014/01/21 职场文书
勾股定理课后反思
2014/04/26 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
护理专业自我评价
2015/03/11 职场文书
行政二审代理词
2015/05/25 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
React如何创建组件
2021/06/27 Javascript
Java实现二分搜索树的示例代码
2022/03/17 Java/Android