<!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>SOSO更懂你</title>
<style>
* {
margin:0px;
padding:0px;
list-style:none;
text-decoration:none;
}
input, button, select, textarea {
outline:none;
}
textarea {
font-size:13px;
resize:none;
}
#search_main{
width:629px;
height:32px;
margin:100px;
}
#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(http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_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(http://mat1.gtimg.com/www/images/qq2012/sosologo.png) no-repeat;
float:right;
margin:7px;
}
#sure{
width:75px;
height:32px;
background:url(http://m3.img.libdd.com/farm5/2012/1016/23/F9993AD7867D5DEF397AB5C712EA5C8CC6F691A8ED565_75_32.PNG);
text-indent: -9999px;
border:none;
float:left;
cursor:pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("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(http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_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(http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_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(http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_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(http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_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(http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_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(http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_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(http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_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(http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_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(http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_68_60.PNG) 0px -30px no-repeat");
});
});
</script>
</head>
<body>
<div id="search_main">
<form action="http://www.soso.com/q" method="get" name="sform" target="_blank" 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>
</body>
</html>
评论已关闭！
