搜狗不同的搜索方式..."/>
导航搜索切换HTML源码,可切换搜索引擎的导航网页搜索框,可以换百度、谷歌、搜狗不同的搜索方式...
可切换搜索引擎的导航网页搜索框,可以换百度、谷歌、搜狗不同的搜索方式
效果图如下:
代码如下:
#search ul {
list-style-type: none;
display: block;
width: 100px;
height: 33px;
margin: 0;
padding: 0;
border: 0px;
float: left;
}
#search li {
border: 0px;
margin: 0px;
padding: 0px;
}
#search .selected {
display: block;
}
#search form {
margin: 0px;
padding: 0px;
}
#search input {
height: 30px;
width: 400px;
margin: 0px;
}
#search .button {
font-size: 17px;
font-weight: 600;
color: #002D96;
height: 30px;
width: 110px;
margin-left: 50px;
background: #e6efc2;
opacity: 0.8;
border: #7fb80e 1px solid;
cursor: pointer;
-webkit-border-radius: 2px;
border-radius: 2px;
}
|
var search = document.getElementById("search");
var formbox = document.getElementById('from_box');
var forms = formbox.getElementsByTagName("form");
var ul =
search.getElementsByTagName("ul")[0];
var li =
ul.getElementsByTagName("li");
var length =
li.length;
li[0].onclick = function() {
for (var i = 1; i < length; i++) {
li[i].style.display =
"block";
}
}
var n = 0; //第一个显示表单的位置
for (var i = 1; i < length; i++) {
li[i].onclick = function(a) {
return function() {
//交换显示的html内容
var temp = li[0].innerHTML;
li[0].innerHTML = this.innerHTML;
this.innerHTML = temp;
for (var j = 1; j < length; j++) {
li[j].style.display =
"none";
}
//交换表单的显示
//alert(li[0].innerHTML.substring(37,7));
//alert(li[0].innerHTML.indexOf('baidu'));
hidden_from(); //隐藏表单
if (li[0].innerHTML.indexOf('baidu') > 0) {
document.getElementById('from_baidu').style.display = 'block';
} else if (li[0].innerHTML.indexOf('google') > 0) {
document.getElementById('from_google').style.display = 'block';
} else if (li[0].innerHTML.indexOf('sougou') > 0) {
document.getElementById('from_sougou').style.display = 'block';
}
//alert(this.innerHTML);
//forms[n].style.display = "none";
//forms[a].style.display = "block";
//n = a;
}
}(i);
li[i].onmouseover = function() {
this.style.border =
"#7fb80e 1px solid";
this.style.background =
"#f2eada";
}
li[i].onmouseout =
function() {
this.style.border = "0px";
this.style.background = "inherit";
}
}
//隐藏搜索框表单的函数
function hidden_from() {
for (var j = 0; j < forms.length; j++) {
forms[j].style.display = "none";
}
}
更多推荐
导航搜索切换HTML源码,可切换搜索引擎的导航网页搜索框,可以换百度、谷歌、搜狗不同的搜索方式...
发布评论