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">
	<script class="jquery library" src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
	<title>jquery搜索引擎切换</title>
	<script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js"></script>
  </head>
<body>
 <div id="search_main">
<form action="#" method="get" id="sform">
  <div id="search">
    <div class="jsSelect" id="Select">
      <ul>
        <li class="s">搜搜</li>
        <li id="soso_s">搜搜</li>
        <li id="baidu_s">百度</li>
        <li id="google_s">谷歌</li>
        <li id="sogou_s">搜狗</li>
        <li id="youdao_s">有道</li>
      </ul>
    </div>
    <input  name="w" type="text" value=""  autocomplete="off" id="inp">
    <div id="searchimg"></div>
  </div>
   <input type="submit" value="搜素"  id="sure"/>
</form>
</div>
<style>* {
	margin:0px;
	padding:0px;
	list-style:none;
	text-decoration:none;
}
input, button, select, textarea {
	outline:none;
}
body{
	background:#fff;
}
textarea {
	font-size:13px;
	resize:none;
}
#search_main{
	width:629px;
	height:32px;
	margin:100px;
	background:#fff;
}
#search {
	width:550px;
	height:28px;
	border:#1FA9F0 2px solid;
	float:left;
}
.jsSelect {
	width:62px;
	height:170px;
	float:left;
	display:inline;
	margin-left:-2px;
}
.jsSelect ul {
	width:62px;
	height:28px;
	overflow:hidden;
	background:#FFF;
	float:left;
	position:absolute;
}
.jsSelect ul .s {
	display:block;
	background:url(images/68_60.PNG) 0px -30px no-repeat;
	cursor:default;
	cursor:pointer;
	color:#1FA9F0;
	border:none;
	border-left:2px solid #1FA9F0;
}
.jsSelect ul li {
	width:58px;
	height:28px;
	line-height:28px;
	font-size: 14px;
	font-weight: bold;
	cursor:pointer;
	text-align:center;
	color:#A8A8A8;
	border:none;
	border-left:2px solid #1FA9F0;
	border-right:2px solid #1FA9F0;
}
#youdao_s {
	border-bottom:2px solid #1FA9F0;
}
#inp {
	width:410px;
	height:28px;
	background:none;
	margin-left:2px;
	font-size:16px;
	border:none;
	line-height:28px;
	color:#008ECA;
}
#searchimg{
	width:50px;
	height:14px;
	background:url(images/50_70.PNG) 0px 0px;
	float:right;
	margin-top:-20px;
	margin-right:5px;
}
#sure{
	width:75px;
	height:32px;
	background:url(images/75_32.PNG);
	text-indent: -9999px;
	border:none;
	float:left;
	cursor:pointer;
}
</style>
<script>	$(document).ready(function(){
		//$("#inp").focus();
		$("body #Select").each(function(i){ 
		i= i+1
		this.id = "Select" + i; 
		var SumimasenSelect = $("#Select"+i)
		$(SumimasenSelect).find("ul li:first").hover(function(){
			$(".s").css("background","url(images/68_60.PNG) 0px 0px no-repeat");
			$(this).parent("ul").css("height",170)
			$(this).siblings("ul li:not(.s)").mouseenter(function(){
				$(".s").css("background","url(images/68_60.PNG) 0px 0px no-repeat");
				$(this).css("background","#39f").css("color","#FFFFFF")
			});
			$(this).siblings("ul li:not(.s)").mouseleave(function(){
				$(this).css("background","none").css("color","#A8A8A8")
				$(".s").css("background","url(images/68_60.PNG) 0px -30px no-repeat");
			});
			$(this).siblings("ul li:not(.s)").click(function(){
				$(this).parent("ul").css("height",28)
				var cdContent = $(this).text()
				$(SumimasenSelect).find("ul li:first").text(cdContent)
			});
			$(this).parent(SumimasenSelect).mouseleave(function(){
				$(this).css("height",28)
			});
			$("#soso_s").click(function(){
			$("#inp").attr("name","w");
			$("#sform").attr("action","http://www.soso.com/q");
			$("#searchimg").css("background","url(images/50_70.PNG) 0px 0px");
			});
			$("#baidu_s").click(function(){
			$("#inp").attr("name","wd");
			$("#sform").attr("action","http://www.baidu.com/s");
			$("#searchimg").css("background","url(images/50_70.PNG) 0px -14px");
			});
			$("#google_s").click(function(){
			$("#inp").attr("name","q");
			$("#sform").attr("action","http://www.google.com.hk/search");
			$("#searchimg").css("background","url(images/50_70.PNG) 0px -42px");
			});
			$("#sogou_s").click(function(){
			$("#inp").attr("name","query");
			$("#sform").attr("action","http://www.sogou.com/web");
			$("#searchimg").css("background","url(images/50_70.PNG) 0px -28px");
			});
			$("#youdao_s").click(function(){
			$("#inp").attr("name","q");
			$("#sform").attr("action","http://www.youdao.com/search");
			$("#searchimg").css("background","url(images/50_70.PNG) 0px -56px");
			});
			$("#wen_s").click(function(){
			$("#sform").attr("action","http://wenwen.soso.com/z/Search.e?cid=w.q.in.sb.ww&ie=utf-8&sp=S")
			});
			$("#news_s").click(function(){
			$("#sform").attr("action","http://news.soso.com/n.q")
			});
	});
		
		},function(){
		$(".s").css("background","url(images/68_60.PNG) 0px -30px no-repeat");
		
	});
	});
</script>
</body>
</html>

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