来源: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. eclipse安装反编译插件

    1. 进入http://jadclipse.sourceforge.net/wiki/index.php/Main_Page#Download          下载 net.sf.jadclipse ...

  2. java nio管道

    管道(Pipe) (本部分原文链接,作者:Jakob Jenkov,译者:黄忠,校对:丁一) Java NIO 管道是2个线程之间的单向数据连接.Pipe有一个source通道和一个sink通道.数据 ...

  3. C++定义全局变量/常量几种方法的区别

    在讨论全局变量之前我们先要明白几个基本的概念: 1. 编译单元(模块):    在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LINK ER ...

  4. 32. Longest Valid Parentheses

    题目: Given a string containing just the characters '(' and ')', find the length of the longest valid ...

  5. 虚函数(virtual)为啥不能是static

    静态成员函数,可以不通过对象来调用,即没有隐藏的this指针. virtual函数一定要通过对象来调用,即有隐藏的this指针. static成员没有this指针是关键!static function ...

  6. IOS自带json解析类解析json

    - (IBAction)test:(id)sender { NSString *result = @"{\"code\":\"S00000\",\&q ...

  7. EXC_BAD_ACCESS

    EXC_BAD_ACCESS,就可以在控制台中看到是哪个对象被释放掉了. 另外要避免频繁的出现上述问题,下面是一些建议: 1. 当引用了别人传递进来的对象时,最好retain一下,避免在别人那里已经把 ...

  8. Drawable(5)关于从资源文件构造的Drawable不显示

    要给它设置个bounds才可以 TextView noticeHeaderView; TextView headerRefreshText; ProgressBar headerRefreshPgrs ...

  9. Android线性布局(Linear Layout)

    Android线性布局(Linear Layout) LinearLayout是一个view组(view group),其包含的所有子view都以一个方向排列,垂直或是水平方向.我们能够用androi ...

  10. Android开发之关于ListView中adapter调用notifyDataSetChanged无效的原因

    1.数据源没有更新,调用notifyDataSetChanged无效. 2.数据源更新了,但是它指向新的引用,调用notifyDataSetChanged无效. 3.数据源更新了,但是adpter没有 ...