来源:http://www.ido321.com/1143.html

看到一些网站上添加了各种搜索引擎。如Google、百度、360、有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键字,找到了小窍门,于是乎,自家弄了一个百家搜索:

效果:

演示地址戳此:http://sousuodaquan.sinaapp.com/

ps:在列表中添加了糯米汇(http://www.nuomihui.com)的站内搜索,仅用于演示,别无它用,特此声明。

HTML代码:

<div class="sdiv">
<form id="sform" method="get" target="_blank" action="http://www.baidu.com/s">
<div class="mains">
<ul id="selectul">
<li id="selectedli" style="background-color: white;">百度</li>
<li>百度</li>
<li>谷歌</li>
<li>必应</li>
<li>有道</li>
<li>搜搜</li>
<li>搜狗</li>
<li>360</li>
<li>爱淘宝</li>
<li>亚马逊</li>
<li>当当</li>
<li>知道</li>
<li>维基</li>
<li>Crea</li>
<li class="lastli">糯米汇</li> </ul>
<input type="text" name="wd" id="findParam"/>
</div>
<input type="submit" value="搜索" id="btn" />
</form>
<h4 style="margin-left:100px">出处:<a href="http://www.ido321.com/" target="_blank">淡忘~浅思</a></h4>
</div>

JavaScript:

window.onload = function()
{
var selectul = document.getElementById('selectul');
var lis = selectul.getElementsByTagName('li');
var selectedli = document.getElementById('selectedli');
var findParam = document.getElementById('findParam');
var sform = document.getElementById("sform");
var lislen = lis.length;
for (var i = 0; i < lislen; i++) {
lis[i].onmouseover=function()
{
selectul.style.overflow = "visible";
};
lis[i].onmouseout=function()
{
selectul.style.overflow = "hidden";
};
lis[i].onclick = function()
{
selectedli.innerHTML = this.innerHTML;
switch(this.innerHTML)
{
case "百度":
findParam.name='wd';
sform.action = "http://www.baidu.com/s";
break;
case "谷歌":
findParam.name='q';
sform.action = "http://www.google.com.hk/search";
break;
case "必应":
findParam.name='q';
sform.action = "http://cn.bing.com/search";
break;
case "有道":
findParam.name='query';
sform.action = "http://www.sogou.com/web";
break;
case "搜搜":
findParam.name='w';
sform.action = "http://www.soso.com/q";
break;
case "搜狗":
findParam.name='q';
sform.action = "http://www.youdao.com/search";
break;
case "360":
findParam.name='q';
sform.action = "http://www.youdao.com/search";
break;
case "爱淘宝":
findParam.name='key';
sform.action = "http://ai.taobao.com/search/index.htm";
break;
case "亚马逊":
findParam.name='field-keywords';
sform.action = "http://www.amazon.cn/s/ref=nb_sb_noss";
break;
case "当当":
findParam.name='key';
sform.action = "http://search.dangdang.com/";
break;
case "知道":
findParam.name='word';
sform.action = "http://zhidao.baidu.com/search";
break;
case "维基":
findParam.name='search';
sform.action = "ttp://zh.wikipedia.org/w/index.php";
break;
case "Crea":
findParam.name='q';
sform.action = "http://search.creativecommons.org/";
break;
case "糯米汇":
findParam.name='s';
sform.action = "http://www.nuomihui.com/";
break;
}
selectul.style.overflow = "hidden";
};
};
};

下一篇:关于坛友的一个布局问题的解答

百家搜索:在网站中添加Google、百度等搜索引擎的更多相关文章

  1. 在网站中添加 https 百度分享

    博客地址:http://www.moonxy.com 一.前言 百度分享是一个提供网页地址收藏.分享及发送的 WEB2.0 按钮工具,借助百度分享按钮,网站的浏览者可以方便的分享内容到人人网.开心网. ...

  2. 百家搜索:在站点中加入Google、百度等搜索引擎

    来源:http://www.ido321.com/1143.html 看到一些站点上加入了各种搜索引擎. 如Google.百度.360.有道等.就有点好奇.这个怎么实现?研究了一各个搜索引擎怎么传送k ...

  3. 【前端】向blog或网站中添加语法高亮显示代码方法总结

    向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在ID ...

  4. TogetherJS – 酷!在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

  5. 在网页中添加google搜索

    网页中插入谷歌搜索,至于怎么上谷歌,后面有时间会更,推荐百度 <form method="GET" action="http://www.google.com.hk ...

  6. Wordpress网站中添加百度统计代码

    百度统计是流量分析平台,帮助收集网站访问数据,提供流量趋势.来源分析.转化跟踪.页面热力图.访问流等多种统计分析服务,同时与百度搜索.百度推广.云服务无缝结合,为网站的精细化运营决策提供数据支持,进而 ...

  7. 使用::befor和::after伪元素在网站中添加图标

    css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,: ...

  8. spring中添加google的guava缓存(demo)

    1.pom文件中配置 <dependencies> <dependency> <groupId>org.springframework</groupId> ...

  9. bootstrap设计网站中添加代码高亮插件

    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...

随机推荐

  1. *[codility]Peaks

    https://codility.com/demo/take-sample-test/peaks http://blog.csdn.net/caopengcs/article/details/1749 ...

  2. Spring transaction事务之roll back回滚

    转载自:http://blog.csdn.net/lovejavaydj/article/details/7635848 试验方法: 写一个单元测试,调用一个service层方法(发生对数据库进行写操 ...

  3. spring @qualifier注解

    1.spring @qualifier注解用来在spring按类型装配可能存在多个bean的情况下,@qualifier注解可以用来缩小范围或者指定唯一. 也可以用来指定方法参数 2.@qualifi ...

  4. Hibernate逍遥游记-第12章 映射值类型集合-005对集合排序Map(<order-by>\<sort>)

    1. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hi ...

  5. Java IDE 编辑器 --- IntelliJ IDEA 进阶篇 生成 hibernate 实体与映射文件

    原文:转:Java IDE 编辑器 --- IntelliJ IDEA 进阶篇 生成 hibernate 实体与映射文件 2011-04-30 12:50 很多人不知道怎么用 IntelliJ IDE ...

  6. Spring配置概述

    1.Spring容器 1)要使应用程序中的Spring容器成功启动,需要以下三方面的条件都具备: · Spring架构的类包都已经放在应用程序的类路径下: · 应用程序为Spring提供完备的Bean ...

  7. Java语言基本语法

    Java语言基本语法 一.标识符和关键字 标识符 在java语言中,用来标志类名.对象名.变量名.方法名.类型名.数组名.包名的有效字符序列,称为“标识符”: 标识符由字母.数字.下划线.美元符号组成 ...

  8. 在oracle中where 子句和having子句中的区别

    在oracle中where 子句和having子句中的区别 1.where 不能放在GROUP BY 后面 2.HAVING 是跟GROUP BY 连在一起用的,放在GROUP BY 后面,此时的作用 ...

  9. basicjava

    .完数 . 第一个完全数是6,它有约数1.2.3.6,除去它本身6外,其余3个数相加,1+2+3=6.第二个完全数是28,它有约数1.2.4.7.14. 28,除去它本身28外,其余5个数相加,1+2 ...

  10. svn: E230001: Server SSL certificate verification failed

    TortoiseSvn是好的 命令行svn 的时候 有问题 ,也加了--no-auth-cache --non-interactive参数 svn list 地址 选下p 就好. http://sta ...