百家搜索：在网站中添加Google、百度等搜索引擎

来源：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";

                };    

            };

        };

 

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