仿Firefox4 集成搜索框

cheney_love

为了学习css和js 仿的一个FF4的搜索框。



<script type="text/javascript">$(document).ready(function (){$("ul").find("a").click(function (){$("ul").find("a").removeClass("choose");$(this).addClass("choose");$("#search").attr("name",$(this).attr("id"));$("#img").attr("src",$(this).attr("name")+'.png');});$("#doSubmit").click(function (){var value = $("#search").val();var name = $("#search").attr("name");var addr = encodeURI('http://www.google.com/search?q='+value+'&newwindow=1');switch(name){case "google":addr=encodeURI('http://www.google.com/search?q='+value+'&newwindow=1');break;case "baidu_mp3":addr=encodeURI('http://mp3.baidu.com/m?f=ms&rf=idx&tn=baidump3&lf=&rn=&word='+value+'&lm=-1#1')break;case "google_pic":addr=encodeURI('http://www.google.com.hk/images?source=hp&newwindow=1&biw=1280&bih=856&gbv=2&aq=f&aqi=&oq=&q='+value+'&tbm=isch')}window.location = addr;});});</script>


<style type="text/css">* { margin:0; padding:0;}img,ul,li,a,p{border:0; list-style-type:none;}.main {margin-left: auto;  margin-right: auto;width:560px;height:150px;border:1px solid #C4C2C2;margin-top:150px;}.title {position:relative;width:560px;height:30px;}.title ul li a{float:left;width:69px;height:25px;line-height:30px;text-align:center;font-weight:900;font-size:15px;color:#466BAE;background:url("background.png");text-decoration: none;border-left:1px solid #C4C2C2;border-bottom:#c4c2c2 1px solid;}.title .choose{color:#fff;height:30px;border:0;background:url("li_now.png");}.content {position:relative;width:552px;height:90px;padding-top:35px;}.search{position:relative;height:50px;margin-left:15px;}.search img {float:left;margin-right:10px;}.search input {float:left;}.search .text {width:350px;height:27px;line-height:27px;}.search .button {width:80px;height:30px;}.clear{clear:both;}</style>