Wrodpress 7B2首页动态搜索模块 采集号同款

本文提供的知识教程均为网络共享资源，切勿商用，商用请支持正版教程。

下面是相关代码教程，其中涉及到两个图片素材，素材给大家提高了链接，自己可以下载到本地替换在上传替换成自己的链接。

1.b2后台模块管理-首页-添加自定义模块页面选择铺满，放入以下代码

<!--首页视频区块-->
<div id="page-wrapper">
<div class="home-banner por">
<section class="section">
<div class="video-wrapper">
<video poster="/pic/2f518848202a4.jpg" autoplay playsinline="" loop muted="" src="https://cloud.video.taobao.com//play/u/581890066/p/1/e/6/t/1/360238629009.mp4" __idm_id__="2285569"></video>
</div>
<div class="video-overlay"></div>
</section>
<div class="layout-center poa" style="width: 1200px;top: 0;left: 50%;margin-left: -600px;">
<div class="home-banner-content clearfix">
<div class="slogan-text por fl">
<p>采集号</p><i class="iblock poa corner"></i> 
<p class="promote-sub-title line-one">专注<span style="display: inline-block;overflow: hidden;line-height: 34px;vertical-align: -9px;"><em id="goal-works" value="5351266"><ps style="color: #26d6c8;">优质内容<ps></em></span>分享！</p>
</div>
</div>
<div class="home-banner-search por searchv2-top-m">
<div class="primary-menus" style=" width: 92%; position: unset;transform: translate(1px, 1px);">
<div class="search-types-cycles poa">
<ul class="selects">
<li data-target="search_1">百度</li>
<li data-target="search_2">Bing</li>
<li data-target="search_3" class="current">站内搜索</li>
<li data-target="search_4">360</li>
<li data-target="search_5">哔哩哔哩</li>
<li data-target="search_6">头条搜索</li>
<li data-target="search_8">知乎</li>
</ul>
</div>
<div class="cont">
<div class="left-cont">
<form class="search hidden" id="search_1" action="https://www.baidu.com/s?wd=" method="get" target="_blank">
<input type="text" name="wd" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">百度搜索</button>
</form>
<form class="search hidden" id="search_2" action="https://cn.bing.com/search?q=" method="get" target="_blank">
<input type="text" name="q" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">Bing搜索</button>
</form>
<form class="search" id="search_3" action="/?s=" method="get" target="_blank">
<input type="text" name="s" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">站内搜索</button>
</form>
<form class="search hidden" id="search_4" action="https://www.so.com/s?q=" method="get" target="_blank">
<input type="text" name="query" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">360搜索</button>
</form>
<form class="search hidden" id="search_5" action="https://search.bilibili.com/all?keyword=" method="get" target="_blank">
<input type="text" name="q" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">哔哩哔哩</button>
</form>
<form class="search hidden" id="search_6" action="https://so.toutiao.com/search?dvpf=pc&source=input&keyword=" method="get" target="_blank">
<input type="text" name="q" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">头条搜索</button>
</form>
<form class="search hidden" id="search_8" action="https://www.zhihu.com/search?q=" method="get" target="_blank">
<input type="text" name="q" class="s" placeholder="请输入关键词">
<button type="submit" name="" class="btn">知乎搜索</button>
</form>
<a class="hot-top text-notify" href="/category/seying" target="_blank" tips="摄影素材" direction="bottom">
<img src="https://www.caijihao.com/wp-content/uploads/2022/06/rank.svg" class="icon-rank" height="15">摄影素材</a>
</div>
</div>
</div>
<p class="home-banner-links line-one">热搜词：<a href="/?s=蠢沫沫" target="_blank" class="iblock">蠢沫沫</a><a href="/?s=雨波" target="_blank" class="iblock">雨波</a><a href="/?s=bilibili" target="_blank" class="iblock">bilibili</a><a href="/?s=粉色的猪" target="_blank" class="iblock">粉色的猪</a>
<a href="/?s=森萝财团" target="_blank" class="iblock">森萝财团</a><a href="/?s=Byoru" target="_blank" class="iblock">Byoru</a>
</p>
<script src="/hitokoto/?format=js&charset=utf-8"></script>
<style>
</style>
<p class="home-banner-linkss line-one1">
<script>
hitokoto()
</script>
</p>
</div>
</div>
<!-- 头部快速链接导航 -->
<div class="top-navs poa">
<div class="layout-center clearfix" style="width: 1200px;">
<div class="top-navs-l fl">
<div class="top-navs-l-item fl">
<p class="top-navs-l-title">
<a href="/document" target="_blank" class="block">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-zixun1"></use>
</svg>文档指南</a>
</p>
<p class="top-navs-l-links"><a href="/requests" class="fl" target="_blank">提交工单</a><a href="/document" class="fl" target="_blank">帮助中心</a>
</p>
</div>
<div class="top-navs-l-item fl">
<p class="top-navs-l-title">
<a href="/category/seying" target="_blank" class="block">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-huodong"></use>
</svg>优质栏目</a>
</p>
<p class="top-navs-l-links"><a href="/category/seying/cos" class="fl" target="_blank">COS素材</a><a href="/category/seying/hj" class="fl" target="_blank">摄影合集</a>
</p>
</div>
<div class="top-navs-l-item fl">
<p class="top-navs-l-title">
<a href="#" target="_blank" class="block">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-gongwenbao"></use>
</svg>问题反馈</a>
</p>
<p class="top-navs-l-links"><a href="/document/196.html" class="fl" target="_blank">失效反馈</a><a href="/category/invalid" class="fl" target="_blank">失效栏目</a>
</p>
</div>
<div class="top-navs-l-item fl">
<p class="top-navs-l-title">
<a href="#" target="_blank" class="block">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-chakansousuo"></use>
</svg>会员中心</a>
</p>
<p class="top-navs-l-links"><a href="/vips" class="fl" target="_blank">开通会员</a><a href="#" class="fl" target="_blank">会员活动</a>
</p>
</div>
<div class="top-navs-l-item fl">
<p class="top-navs-l-title">
<a href="https://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" target="_blank" class="block">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-dingwei"></use>
</svg>合作伙伴</a>
</p>
<p class="top-navs-l-links"><a href="#" class="fl" target="_blank">广告投放</a><a href="#" class="fl" target="_blank">友情链接</a>
</p>
</div>
</div>
<div class="top-navs-m fl"> <a href="/gold-top" target="_blank" class="fl">财富排行</a> <a href="/dark-room" target="_blank" class="fl">小黑屋</a> <a href="/task" target="_blank" class="fl">任务大厅</a> <a href="/mission/today" target="_blank" class="fl">签到管理</a> 
</div>
<div class="top-navs-r fl clearfix">
<a class="fl" rel="nofollow" target="_blank" href="/verify">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-yonghu"></use>
</svg>
<p>高级认证</p>
</a>
<a class="fl" target="_blank" href="/vips">
<svg class="icon-dhs" aria-hidden="true">
<use xlink:href="#hg-huiyuan"></use>
</svg>
<p>会员办卡</p>
</a>
</div>
</div>
</div>
</div>
</div>

2.以下JS代码放入child.js

/*首页动态大图搜索开始*/
(function($){
var m=$('.primary-menus');
if(m.length<1) return;
var ul=m.find('.selects');
if(ul.length<1) return;
var lis=ul.children('li');
if(lis.length<1) return;
var s=m.find('.search');
var sVal=s.find('.s').val();
lis.on('click',function () {
var d=$(this).attr('data-target');
if (d) {
lis.removeClass('current');
$(this).addClass('current');
s.addClass('hidden');
s.filter('#'+d).removeClass('hidden');
//s.filter('#'+d).find('.s').val('');
s.filter('#'+d).find('.s').trigger('focusin');
}
});
s.find('.s').on('focusin',function () {
if ($(this).val()==sVal) {
$(this).val('');
}
})
s.find('.s').on('focusout',function () {
var v=$(this).val();
if (orz.isEmpty(v)) {
v=sVal;
}
s.find('.s').val(v);
})
})(jQuery);
/*首页动态大图搜索结束*/

3.引入阿里矢量图标，该链接失效后请自行修改

4.代码放到你的css样式

重要声明

本站资源均来自网络分享，如有侵犯你的权益请私信留言收到留言后，我们会第一时间进行审核。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！

---

如果遇到付费才可获取的素材，建议升级对应的VIP。全站90%以上的素材“均有备份”。本站资源均以主流网盘分享，以7z、rar、分卷等常见的格式压缩，为防止有人压缩软件不支持7z格式，7z解压，建议下载7-zip，zip、rar、WinRA软件。有疑问请查看站内帮助中心！