可切换搜索引擎的导航网页搜索框，可以换百度、谷歌、搜狗不同的搜索方式

效果图如下：

代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><style>#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;}</style></head><body><div id="search" align="center"><table><tr><td><ul><li style="display:block;"><img src="data:image/search_mark/1_wangye_baidu.gif" /></li><li style="display:none;"><img src="data:image/search_mark/1_wangye_google.gif" /></li><li style="display:none;"><img src="data:image/search_mark/1_wangye_sougou.gif" /></li></ul></td><td id="from_box" style="padding-left:10px;"><form id="from_baidu" style="display:block" action="http://www.baidu.com/baidu" target="_blank" method="get"><input name="" type="hidden" value="baidu" /><input type="text" name="word" /><input class="button" type="submit" value="百度一下" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'" /></form><form id="from_google" style="display:none" action="http://www.google.com/search" target="_blank" method="get"><input type="text" name="q" /><input class="button" type="submit" value="google搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'" /></form><form id="from_sougou" style="display:none" action="http://www.sogou.com/web" target="_blank" name="sogou_queryform"><input type="text" name="query"><input class="button" type="submit" value="sougou搜索" onMouseOver="this.style.opacity='1'" onMouseOut="this.style.opacity='0.7'" /></form></td></tr></table></div><script>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";}}</script></body></html>

源码以及图片下载地址：http://download.csdn.net/detail/u014175572/9205821

可切换搜索引擎的导航网页搜索框，可以换百度、谷歌、搜狗不同的搜索方式相关推荐

html切换搜索引擎,关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享...
这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码,非常不错,具有参考借鉴价值 ,需要的朋友可以参考下废话不多说了,直接给大家贴代码了,具体代码如下所述: #search ...
html切换搜索引擎,JavaScript切换搜索引擎的导航网页搜索框实例代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: #search ul { list-style-type: none; display: block; width: 100px; height: ...
京东搜索框html,使用JavaScrip模拟实现仿京东搜索框功能
使用js模拟实现京东的搜索框,主要用了js中的onfocus(注册焦点事件),onblur(失去焦点的事件): 主要实现了: 在鼠标点进去的时候,里面的默认内容消失: 在输入之后,再点击搜索框外,输入 ...
手机桌面百度搜索框不显示热词_移动端搜索和PC端搜索的区别
随着智能手机的普及,移动端搜索量是越来越大了,在去年从未有人通过移动搜索我的博客,而到了今年,从通过统计工具的数据分析来看,已经有越来越多的用户通过手机搜索到我的博客. 有一段时间移动搜索来路很大的时 ...
html5搜索框在最右侧,CSS3,HTML5和jQuery搜索框集锦
添加搜素框或网站搜索功能是为了方便用户能够轻松.快捷地找到自己需要的信息.因此,在网站中添加一个搜索框已经成为网页设计的主流元素之一.添加一个搜索框到网站会使得用户界面更加友好,也能帮助用户轻松愉快地 ...
chrome 搜索框记录_访问Google Chrome中的搜索框
chrome 搜索框记录 Do you miss having a search box in Chrome and would like to get one back? Then join us ...
html怎么调搜索框宽高,百度站内搜索css：输入框宽度及样式自定义
近日网站使用了百度站内搜索api,目的是为了提高站内搜索的速度,减轻查询站内数据库带来的服务器压力. 不过在使用百度站内搜索api(生效范围:*webkaka.com/*)后发现一个问题,不同的频道模 ...
html怎么创百度搜索框,JS实现百度搜索框
本文实例为大家分享了JS实现百度搜索框的具体代码,供大家参考,具体内容如下实现原理向输入框动态输入时关键词,将当前关键词作为问号参数后面的值,因为要跨域使用百度的接口,所以通过 JSONP 跨域创 ...
div搜索框与按钮不在一行_高效搜索神器 Everything 搜索技巧汇总
Everything 是什么 Everything 是一款基于名称快速定位文件和文件夹的搜索工具.它的官网链接在这里.它通过直接访问 NTFS 磁盘 MTF 表的方式给我们提供了极快的搜索速度,使得 ...

可切换搜索引擎的导航网页搜索框，可以换百度、谷歌、搜狗不同的搜索方式

可切换搜索引擎的导航网页搜索框，可以换百度、谷歌、搜狗不同的搜索方式相关推荐

最新文章

热门文章