工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 综合应用 > 正文

搜索模块取消百度和推荐搜索,效果改悬停为点击

发布时间:2018-09-27 09:13:19作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

有博友反馈说我博客右侧的悬浮窗在13寸笔记本电脑上有一部分超出电脑屏幕,这就需要优化了,而这优化必然要和搜索模块扯上关系,怎么个必然性,且看我的解决过程和技术思路。

之前悬浮窗的position:fixed定位使用bottom来控制与底部的距离,博友反馈13寸笔记本电脑上会遮住上面的搜索模块还有导航,于是我把bottom换成了top,因为要考虑小屏幕电脑,所以top距离我尽可能的小,但问题来了,就是当鼠标悬停到悬浮窗里面的版权声明上时,搜索模块就出来了,如果把top设置为200px(导航高度+搜索模块高度)不会出现此现象,但是会盖住footer,这就只能改搜索模块了,想过把悬浮窗移到左边,但移过去后感觉真的很奇怪。

当初做搜索功能时,为了SEO考虑,我加入了推荐搜索和百度搜索,推荐搜索是我自己写的,百度搜索是在网上找的二开代码,但是长期看百度统计数据发现推荐搜索的词并没有来源ip,这是因为搜什么词是用户决定的,还有站内百度搜索,直接访问网站的多半是来看看我更新的文章,没有站内百度搜索需求,从关键词来网站的,百度搜索需求已通过百度搜索引擎解决,从这两个方面讲,站内百度搜索用处太小,所以,去掉!

以前的效果是悬停向左移动出现,虽然在文章“博客改版技术总结:input的radio样式兼容和ios微信里hover效果兼容”里我优化了hover效果在ios设备里的兼容,但是在ios设备的百度APP里却出现了另一个问题,就是点击搜索图标,会自动搜索文本框里的默认词,似乎点击的地方触发会延迟,在ios微信里却是正常的,所以这个“hover”始终是要改为“click”的。

来一张以前的搜索模块截图,纪念一下,因为以后再也看不到了:

下面是jQuery代码:
  1. <script> 
  2.     $(document).ready(function () { 
  3.         $(".searchico").click(function () { 
  4.             $("#ssdm").stop().animate({right: "0"}); 
  5.             $(".searchicozz").css("display""block"); 
  6.             $(".searchico").text('收回'
  7.         }); 
  8.         $(".searchicozz").click(function () { 
  9.             $("#ssdm").stop().animate({right: "-290px"}); 
  10.             $(".searchicozz").css("display""none"); 
  11.             $(".searchico").text('搜索'
  12.         }) 
  13.     }) 
  14. </script> 

其中searchico是有搜索文字的块,点击后整个搜索模块ssdm向左移动,css代码里面right是-290px,searchicozz的作用是点击它收回搜索模块。如果是上下展开收回用toggle我还可以让toggle执行两次(slide Toggle()方法如何先后执行两次),这个吗,我第一就想到了切换同一位置的点击对象来达到不断展开和收回的效果。

另外还发现一个有意思的东西,我想给搜索框用上placeholder,但会出现一个问题就是搜索框为空的时候点搜索也会跳转到搜索结果列表页,这个列表页是系统的列表页

而用原来的代码

  1. <input name="q" id="q" size="30" value="phpcms" onMouseOver="this.focus()" onBlur="if (value ==''){value='phpcms'}" onFocus="this.select()" onClick="if(this.value=='phpcms')this.value=''" autocomplete="off"> 

不存在文本框为空的情况,里面的代码我想大家都明白是什么意思。

最近在给网站换程序,可能到新程序换好前都不会再更新文章,还请各位博友多担待。

本文标签html架构和css思维 ,您可以阅读与「html架构和css思维 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:返回列表下一篇:目前写过最复杂的div弹出遮罩层结构

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包

工作室注册登录标签云赞助光荣榜