jQuery仿腾讯首页搜索框样式js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿腾讯首页搜索框样式js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿腾讯首页搜索框样式</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}


/* searchTxt */
.searchBtn button,.searchTxt .searchMenu .searchSelected{background-image:url(images/searchbg.png);background-repeat:no-repeat;}

.searchTxt{float:left;width:399px;height:30px;border:2px solid #d3d3d3;border-right:0;position:relative;z-index:20;background:#fff;}
.searchTxt .radius{width:1px;height:1px;overflow:hidden;background:#f4f4f4;position:absolute;top:-2px;left:-2px;}
.searchTxtHover{float:left;width:399px;height:30px;border:2px solid #3297d8;border-right:0;position:relative;z-index:20;background:#fff;}
.searchTxtHover .radius{width:1px;height:1px;overflow:hidden;background:#cce5f5;position:absolute;top:-2px;left:-2px;}

.searchTxt .searchMenu{float:left;}
.searchTxt .searchMenu .searchSelected{color:#a8a8a8;cursor:pointer;font-size:14px;font-weight:bold;height:30px;line-height:30px;padding:0 10px;width:48px;background-position:0px -54px;}
.searchTxt .searchMenu .searchOpen{background-position:0px -104px;}

.searchTxt .searchMenu .searchTab{display:none; position:absolute;top:30px;left:-2px;width:58px;border:2px solid #3297d8;border-top:0;background:#fff;height:258px;z-index:20;}
.searchTxt .searchMenu .searchTab li{width:58px;height:28px;line-height:28px;color:#a8a8a8;font-size:14px;font-weight:bold;text-indent:10px;cursor:pointer;}
.searchTxt .searchMenu .searchTab li.selected{background:#edf3fc;color:#6994c1;}

.searchTxt input{float:left;border:0;background:#fff;color:#333;font:14px/22px '宋体',verdana,tahoma,arial,'SimSun',sans-serif;width:221px;height:22px;margin:0;outline:medium none;padding:4px;}
.searchTxt .sosoLogo{float:right;margin:8px 6px 0 0;display:inline;}
.searchBtn{float:left;}
.searchBtn button{background-position:0px 0px;border:0;color:#fff;cursor:pointer;float:left;font-size:16px;height:34px;text-indent:-9999px;width:86px;}
</style>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function(){ 

	$("#searchSelected").click(function(){ 
		$("#searchTab").show();
		$(this).addClass("searchOpen");
	}); 

	$("#searchTab li").hover(function(){
		$(this).addClass("selected");
	},function(){
		$(this).removeClass("selected");
	});
	 
	$("#searchTab li").click(function(){
		$("#searchSelected").html($(this).html());
		$("#searchTab").hide();
		$("#searchSelected").removeClass("searchOpen");
	});
	
});
</script>
</head>
<body>

<form method="get" name="" action="#" target="_blank" style="width:487px;height:34px;margin:40px auto 0 auto;">
	<div id="searchTxt" class="searchTxt" onMouseOver="this.className='searchTxt searchTxtHover';" onMouseOut="this.className='searchTxt';">
		<div class="radius" style="top:-2px;"></div>
		<div class="radius" style="top:31px;"></div>
		
		<div class="searchMenu">
			
			<div class="searchSelected" id="searchSelected">网页</div>
			
			<div style="display:none;" class="searchTab" id="searchTab">
				<div class="radius" style="top:259px;"></div>
				<div class="radius" style="top:259px;left:59px;"></div>
				<ul>
					<li class="">网页</li>
					<li>图片</li>
					<li>视频</li>
					<li>音乐</li>
					<li>地图</li>
					<li>问问</li>
					<li>百科</li>
					<li>新闻</li>
					<li>购物</li>
				</ul>
			</div>
			
		</div>
		
		<input name="w" type="text" />
		
		<a href="#" target="_blank"><img id="sogouLogo" alt="搜狗" class="sosoLogo" src="images/sogoulogo.png"></a>
		
	</div>
	
	<div class="searchBtn">
		<button id="searchBtn" type="submit">搜狗</button>
	</div>

</form>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)