来源: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. 利用Nginx搭建http和rtmp协议的流媒体服务器

    http://www.linuxidc.com/Linux/2013-02/79118.htm

  2. [Unity菜鸟] Character控制移动

    1. 给角色加角色控制器组件,然后用以下代码可以控制角色移动和跳跃 float speed = 6.0f; float jumpSpeed = 8.0f; float gravity = 20.0f; ...

  3. VS2010/MFC编程入门教程之目录和总结

    鸡啄米的这套VS2010/MFC编程入门教程到此就全部完成了,虽然有些内容还未涉及到,但帮助大家进行VS2010/MFC的入门学习业已足够.以此教程的知识为基础,学习VS2010/MFC较为深入的内容 ...

  4. SqlServer几个注意点

    1.修改系统参数时,必须是单用户情况下才能更改成功!在Properties->Options中修改. 2.数据库字段值默认是不区分大小写的,修改方法如下: 2.1.右键数据库,选择Propert ...

  5. [置顶] 手机通过socket控制电脑关机,重启,注销等功能

    服务端 package com.pc; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOE ...

  6. html5 touch事件实现触屏页面上下滑动(一)

    最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...

  7. 深入理解Java虚拟机

    1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http://nibnait.com/6f8dd084-about-Java-Virtual-Machine/ 2. JVM性能调优 ...

  8. c# webbrowser 随机点击链接 2

    找到广告代码所在的div或table ,然后用WebBrowser执行js去点这个div(或table) 那个广告是js实现的,你浏览的时候是看不到图片和连接的,请问各位大虾应该怎么实现?给点思路.. ...

  9. BZOJ 2194 快速傅里叶之二

    fft. #include<iostream> #include<cstdio> #include<cstring> #include<cstdlib> ...

  10. codevs 1172 Hankson 的趣味题

    woc....这题考细节处理.要注意代码的逻辑顺序还有不要作死地循环到sqrt+1. #include<iostream> #include<cstdio> #include& ...