可切换搜索引擎的导航网页搜索框,可以换百度、谷歌、搜狗不同的搜索方式
2015-10-23 11:04
941 查看
可切换搜索引擎的导航网页搜索框,可以换百度、谷歌、搜狗不同的搜索方式
效果图如下:
代码如下:
源码以及图片下载地址:http://download.csdn.net/detail/u014175572/9205821
效果图如下:
代码如下:
<!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="image/search_mark/1_wangye_baidu.gif" /></li> <li style="display:none;"><img src="image/search_mark/1_wangye_google.gif" /></li> <li style="display:none;"><img src="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 .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
相关文章推荐
- codeforces 552 E. Vanya and Brackets
- Android中获取应用程序(包)的信息-----PackageManager的使用(一)
- hadoop1 eclipse插件编译
- iOS激情详解之Swift (二)
- mysql 添加、删除和修改数据
- 公式节点与表达式节点的区别
- Swift学习链接
- eclipse中svn冲突解决
- 欧洲行-前期准备
- 1028. 人口普查(20)
- 鼠标放上去变另一个图片
- c++问题之-- MessageBoxW”: 不能将参数 2 从“char [20]”转换为“LPCWSTR”
- URAL 1282 Game Tree
- HDU 4462(暴力枚举)
- Eclipse搭建SSH(Struts2+Spring3+Hibernate3)框架项目教程
- Fast-Fail、ConcurrentModificationException 、CopyOnWriteArrayList
- 浅析深究什么是中间件
- redis事务
- Android开发之Service的写法以及与Activity的通信
- jsf 实例代码