网页嵌入百度搜索，谷歌搜索下拉选择直接搜索

haierboos

浏览: 438277 次

最近访客更多访客>>

yhnd685

airs

paopao3

大熊很忙

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1012)

社区版块

存档分类

2013-09 ( 28)
2013-08 ( 112)
2013-07 ( 30)
更多存档...

<!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>
<title>qqqun21/777/12</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style>
#divselect{	margin:0px;
			position:relative;
			z-index:10000;
			background: #fff;}
#divselect input{height:20px;
				 line-height:20px;
				border:1px solid grey;
				float:left;
				padding:0px;
				margin:0px;}
#divselect span{height:20px;
				 line-height:20px;
				border:1px solid grey;
				float:left;
				padding:0px;
				margin:0px;}
#divselect ul{margin:0px;
				float:left;
				 width:150px;
				border-left:0px;
				border-right:0px;
				padding:0px;}
#divselect ul li{margin:0px;
				 height:20px;
				 line-height:20px;
				border-top:0px;
				border-bottom:1px solid grey;
				border-left:1px solid grey;
				border-right:1px solid grey;
				 display: none;				 
				 cursor: pointer;}
#divselect ul img{
				height:19px;
				width:50px;
}
</style>
<script>
function showIt(){
	var lis = document.getElementsByName('myLis'); 	
	for(var i=1;i<lis.length;i++){
		if(lis[i].style.display==""){
			lis[i].style.display="block";
		}else{
			lis[i].style.display="";
		}
	}
}
function hideIt(){
	var lis = document.getElementsByName('myLis'); 
	for(var i=1;i<lis.length;i++){
		lis[i].style.display="";
	}
}
function sosoIt(obj){
	var wd = document.getElementById("wd").value;
	if(obj==1){
		window.open("http://www.baidu.com/s?wd="+wd)
	}
	if(obj==2){
		window.open("http://www.sogou.com/web?query="+wd)
	}
	if(obj==3){
		window.open("http://www.google.com.hk/search?newwindow=1&safe=strict&site=webhp&q="+wd)
	}
}
</script>
</head>
<body>
<div id='divselect'>
<input type="text" id="wd" style="border-right:0px;"/>
<ul id="selectUl">
<li name="myLis" style="display:block;border-top:1px solid grey;" onclick="sosoIt(1)">百度搜索<img src="http://img.baidu.com/img/logo-80px.gif" border="0"/></li>
<li name="myLis" onclick="sosoIt(2)">搜狗搜索<img src="http://www.sogou.com/images/logo_l.gif"border="0" alt="Google"/></li>
<li name="myLis" onclick="sosoIt(3)">谷歌搜索<img src="http://www.google.com/logos/Logo_40wht.gif"border="0" alt="Google"/>
</li>
</ul>
<span onclick="showIt()" style="border-left:0px;">▼</span>
</div>
</body>

大致粗糙的实现了下。

分享到：