js切换搜索引擎效果

最新推荐文章于 2024-06-28 20:09:35 发布
最新推荐文章于 2024-06-28 20:09:35 发布
阅读量839 收藏
点赞数
分类专栏： web前端
js切换搜索引擎效果
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script class="jquery library" src=" http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
 <title>SOSO </title>
 <script id="jquery_183" type="text/javascript" class="library" src=" http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
  </head>
<body>
 <div id="search_main">
<form action=" http://www.soso.com/q" method="get" id="sform">
  <div id="search">
    <div class="jsSelect" id="Select">
      <ul>
        <li class="s">搜搜</li>
        <li id="soso_s">搜搜</li>
        <li id="baidu_s">百度</li>
        <li id="google_s">谷歌</li>
        <li id="sogou_s">搜狗</li>
        <li id="youdao_s">有道</li>
      </ul>
    </div>
    <input  name="w" type="text" value=""  autocomplete="off" id="inp">
    <div id="searchimg"></div>
  </div>
   <input type="submit" value="搜素"  id="sure"/>
</form>
</div>
  </body>
</html>
     <style>* {
 margin:0px;
 padding:0px;
 list-style:none;
 text-decoration:none;
}
input, button, select, textarea {
 outline:none;
}
body{
 background:#fff;
}
textarea {
 font-size:13px;
 resize:none;
}
#search_main{
 width:629px;
 height:32px;
 margin:100px;
 background:#fff;
}
#search {
 width:550px;
 height:28px;
 border:#1FA9F0 2px solid;
 float:left;
}
.jsSelect {
 width:62px;
 height:170px;
 float:left;
 display:inline;
 margin-left:-2px;
}
.jsSelect ul {
 width:62px;
 height:28px;
 overflow:hidden;
 background:#FFF;
 float:left;
 position:absolute;
}
.jsSelect ul .s {
 display:block;
 background:url( http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_68_60.PNG) 0px -30px no-repeat;
 cursor:default;
 cursor:pointer;
 color:#1FA9F0;
 border:none;
 border-left:2px solid #1FA9F0;
}
.jsSelect ul li {
 width:58px;
 height:28px;
 line-height:28px;
 font-size: 14px;
 font-weight: bold;
 cursor:pointer;
 text-align:center;
 color:#A8A8A8;
 border:none;
 border-left:2px solid #1FA9F0;
 border-right:2px solid #1FA9F0;
}
#youdao_s {
 border-bottom:2px solid #1FA9F0;
}
#inp {
 width:410px;
 height:28px;
 background:none;
 margin-left:2px;
 font-size:16px;
 border:none;
 line-height:28px;
 color:#008ECA;
}
#searchimg{
 width:50px;
 height:14px;
 background:url( http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_50_70.PNG) 0px 0px;
 float:right;
 margin-top:-20px;
 margin-right:5px;
}
#sure{
 width:75px;
 height:32px;
 background:url( http://m3.img.libdd.com/farm5/2012/1016/23/F9993AD7867D5DEF397AB5C712EA5C8CC6F691A8ED565_75_32.PNG);
 text-indent: -9999px;
 border:none;
 float:left;
 cursor:pointer;
}
</style>
       <script> $(document).ready(function(){
  //$("#inp").focus();
  $("body #Select").each(function(i){ 
  i= i+1
  this.id = "Select" + i; 
  var SumimasenSelect = $("#Select"+i)
  $(SumimasenSelect).find("ul li:first").hover(function(){
   $(".s").css("background","url( http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_68_60.PNG) 0px 0px no-repeat");
   $(this).parent("ul").css("height",170)
   $(this).siblings("ul li:not(.s)").mouseenter(function(){
    $(".s").css("background","url( http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_68_60.PNG) 0px 0px no-repeat");
    $(this).css("background","#39f").css("color","#FFFFFF")
   });
   $(this).siblings("ul li:not(.s)").mouseleave(function(){
    $(this).css("background","none").css("color","#A8A8A8")
    $(".s").css("background","url( http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_68_60.PNG) 0px -30px no-repeat");
   });
   $(this).siblings("ul li:not(.s)").click(function(){
    $(this).parent("ul").css("height",28)
    var cdContent = $(this).text()
    $(SumimasenSelect).find("ul li:first").text(cdContent)
   });
   $(this).parent(SumimasenSelect).mouseleave(function(){
    $(this).css("height",28)
   });
   $("#soso_s").click(function(){
   $("#inp").attr("name","w");
   $("#sform").attr("action"," http://www.soso.com/q");
   $("#searchimg").css("background","url( http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_50_70.PNG) 0px 0px");
   });
   $("#baidu_s").click(function(){
   $("#inp").attr("name","wd");
   $("#sform").attr("action"," http://www.baidu.com/s");
   $("#searchimg").css("background","url( http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_50_70.PNG) 0px -14px");
   });
   $("#google_s").click(function(){
   $("#inp").attr("name","q");
   $("#sform").attr("action"," http://www.google.com.hk/search");
   $("#searchimg").css("background","url( http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_50_70.PNG) 0px -42px");
   });
   $("#sogou_s").click(function(){
   $("#inp").attr("name","query");
   $("#sform").attr("action"," http://www.sogou.com/web");
   $("#searchimg").css("background","url( http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_50_70.PNG) 0px -28px");
   });
   $("#youdao_s").click(function(){
   $("#inp").attr("name","q");
   $("#sform").attr("action"," http://www.youdao.com/search");
   $("#searchimg").css("background","url( http://m3.img.libdd.com/farm4/2012/1016/23/4DAF82D0B27DC4FB62DC45CD3114B9A0B154A88F1D2C4_50_70.PNG) 0px -56px");
   });
   $("#wen_s").click(function(){
   $("#sform").attr("action"," http://wenwen.soso.com/z/Search.e?cid=w.q.in.sb.ww&ie=utf-8&sp=S")
   });
   $("#news_s").click(function(){
   $("#sform").attr("action"," http://news.soso.com/n.q")
   });
 });
  
  },function(){
  $(".s").css("background","url( http://m1.img.libdd.com/farm4/2012/1016/20/3980B72CC089D6AEDF173FC70D8F755E6B8B7F9506523_68_60.PNG) 0px -30px no-repeat");
  
 });
 });

</script>
 








图片

图片

图片

图片
想旅游咯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript切换搜索引擎的导航网页搜索框实例代码
10-19
主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
js 搜索引擎
06-25
纯js做的搜索功能，检索客户端规定格式的数据（json），提供根据拼音搜索，拼音首字母搜索，汉字搜索。全客户端操作。 ie 6,8 / chrome / ff 测试通过
php和js搜索框,关于JavaScript如何切换搜索引擎的导航网页搜索框的实例代码分享...
weixin_39737001的博客
03-11 256
这篇文章主要介绍了javascript切换搜索引擎的导航网页搜索框的实例代码，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下废话不多说了，直接给大家贴代码了，具体代码如下所述：#search ul {list-style-type: none;display: block;width: 100px;height: 33px;margin: 0;padding: 0;border: 0px;fl...
微软Edge浏览器搜索引擎切换全攻略
最新发布
2401_85702623的博客
06-28 1618
Edge浏览器是基于Chromium开源项目开发的，它不仅支持Chrome扩展，而且在性能和安全性方面进行了优化。用户可以享受到快速、安全且响应灵敏的浏览体验。搜索引擎的切换在Edge浏览器中是一个简单而直观的过程，用户可以根据自己的需求轻松更改默认搜索引擎或添加新的搜索引擎。通过本文的详细介绍，读者应该能够掌握Edge浏览器中搜索引擎切换的各种方法和技巧。随着网络信息的日益增长，合理利用搜索引擎对于提高信息获取效率至关重要。
js 实现 综合的搜索引擎
03-31
js 实现 综合的搜索引擎! 值得下载看看!资源免费,大家分享!!
jquery搜索引擎切换特效代码
03-20
接下来，我们将使用jQuery来处理搜索和切换搜索引擎的逻辑。首先，我们需要在页面加载完成后绑定事件处理器： ```javascript $(document).ready(function() { // 当用户点击搜索引擎按钮时触发事件 $('#engine-...
人工智能-项目实践-搜索引擎-在任何搜索引擎上，可以选择随意切换其他搜索引擎
02-26
JavaScript可以动态修改网页内容，实现交互式界面，比如在用户选择切换搜索引擎时，无需刷新页面就能更改搜索框背后的API接口，使得用户可以无缝地在不同的搜索引擎之间切换。 **实现过程** 1. **前端界面设计**：...
可切换搜索引擎的导航网页搜索框
10-23
一个可切换搜索引擎的导航网页搜索框，为用户提供了一站式的便捷搜索体验，允许用户根据需求快速切换不同的搜索引擎，如百度、谷歌、搜狗等。这样的设计旨在满足不同用户对于搜索结果偏好和效率的需求。 首先，我们...
jquery搜索引擎切换代码.zip
07-04
jquery搜索引擎切换代码是一款可自由切换的聚合型搜素引擎。可以实现多个搜索引擎搜索跳转的效果! jquery搜索引擎切换代码                                                                                            点击查看演示
js 特效 html 特效 同时多种搜索引擎
10-11
js 特效 html 特效 同时多种搜索引擎 js 特效 html 特效 同时多种搜索引擎
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
11-24
以下javascript脚本代码可以实现判断访问是否来自搜索引擎。 代码如下： [removed] if(window.name != 'ad_app6'){ var r = document.referrer; r = r.toLowerCase(); //转为小写 var aSites = new Array('google.','baidu.','sm.','soso.','so.','360.','yahoo.','youdao.','sogou.','gougou.'); var b = false; for (i in aSites){
利用JS实现点击按钮后图片自动切换的简单方法
10-21
下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js获取搜索引擎的关键词
08-06
var sousuo=refer.split(".")[1];/*分割来获取是什么搜索*/ var oSearch;/*输出搜索引擎*/ var okeywords;/*输出关键词*/ switch(sousuo){ case "baidu":
javascript html网页中的综合搜索引擎代码
11-16
js javascript html网页中的综合搜索引擎代码
JS搜索引擎关键词获取
锦锦_jane的博客
12-29 1396
需求： 获取用户来源（用户从搜索引擎通过什么关键词进到本网站的） 一、获取来源网址： document.referrer 以“简书”为例，下同。 在搜索引擎搜索“简书”，点击目标链接，在目标链接控制台中输入document.referrer，即可获取来源网址 二、相关搜索渠道 1. 百度 1.1 百度pc端 百度搜索引擎搜索时，百度搜索页面的url中，wd后面是关键词 点击百度搜索到的网页后，官方把wd后面的关键字隐藏，需要通过eqid调用官方接口，获取到关键词 官方接口网址，收费为0.001一次.
一个封装搜索引擎的javascript类
阿波的专栏
06-23 1300
这个javascript 类 封装了 Google，百度的本地搜索功能测试页： SearchEngine ////////////////////////////////////////////////////////////**//*  YWControl JavaScript framework, version 0.0.1 *  (c) 2005-2007 lava_sd
JS实现类似于百度搜索引擎功能（jspon跨域）
Michelledai1104的博客
08-27 1142
首先测试百度接口 <!-- 测试百度接口 --> <!-- <script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=爱奇艺&req=2&
搜索引擎开发：跨语言搜索与简繁体转换
"《跨语言搜索-high-performance-java-persistence》主要探讨了如何在Java环境下实现高性能的搜索引擎，特别是在处理跨语言搜索，特别是简繁体中文转换的问题。这本书以Lucene和Solr为核心技术，深入讲解搜索引擎的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值