^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人

替换WordPress搜索为多引擎

阿里云限时特惠

一个搜索框集成了百度、谷歌、必应、有道、搜搜、 搜狗、 360、爱淘宝、亚马逊、当当、 知道、维基、Crea 这么多搜索引擎,你是不是很心动?

1、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>
    </div>

2、js 代码

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 = "https://dedewp.com/";
                             break;
                    }
                    selectul.style.overflow = "hidden";
                };    
            };
        };

3、css 代码

<style type="text/css">
		.sdiv
		{
			margin: 50px auto;
			padding: 0px;
			width: 373px;
			height: 32px;
			font-family: "Microsoft Yahei";
			border: 1px solid #5C9EFF;
		}
		.mains
		{
			float: left;
		}
		#selectul
		{
			list-style: none;
			float: left;
			height: 32px;
			overflow: hidden;
			margin-top: 0px;
			margin-left: -40px;
		}
		#selectul li
		{
			 color: rgb(168, 168, 168);
			 width: 75px;
			 height: 30px;
			 line-height: 30px;
			 text-align: center;
			 border-left: 1px solid #5C9EFF;
		}
		.lastli
		{
			border-bottom: 1px solid #5C9EFF;
		}
		#selectul li:hover
		{
			cursor: pointer;
			background-color: #5C9EFF;
			color: black;
		}
		#selectedli
		{
			background: url("updown.png") no-repeat scroll 15px -30px transparent;
		}
		#selectedli:hover
		{
			background: url("updown.png") no-repeat scroll 15px 0px transparent;
		}
		#findParam
		{
			height: 26px;
			width: 200px;
			border: 0px
		}
		#btn
		{
			height: 32px;
			width: 100px;
			font-size: 17px;
			margin-left: -5px;
			background-color: #5C9EFF;
			font-family: "Microsoft Yahei";
			border: 0px;
		}
	</style>

4、效果

替换WordPress搜索为多引擎

5、怎么替换 wordpress 自带的搜索,不用陌小雨教吧!真的有需要,Q 我!

让小雨知道,这篇文章帮到了你

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

如有疑问,请前往问答中心反馈!

反馈
  1. 斯托克笔记
    博主高人,牛!
  2. 纯洁博客
    博主首页文章列表的延迟加载怎么弄的,看着真好
  3. 杰伦视频网
    学习下,谢谢分享。
  4. 免费资源
    这个不错 签到成功!签到时间:上午9:03:30,陌小雨,你很棒!一起加油哦哦~