【B2美化】首页动态视频搜索模块

1.添加搜索模块

将以下代码放至主题模块中（主题设置-模块管理-自定义代码），自己改动一下里面的视频网址和url主页的路径，如果下面路径失效了使用下面的

<!--动态搜索背景html代码开始--> <style>     .poa {         color: #f4f4f4;     }     p.home-banner-linkss.line-one1 {         width: 80%;         font-size: 14px;         height:             20px;         line-height: 20px;         color: #f4f4f4;         text-shadow: 0 2px 4px rgb(0 0 0 / 27%);         margin-top: 40px;         text-align: center;     } </style> <div id="page-wrapper">     <div class="home-banner por">         <section class="section">             <div class="video-wrapper">                 <video autoplay playsinline="" loop muted="" src="https://static.699pic.com/video/video-banner-v2.2.mp4">                 </video>             </div>             <div class="video-overlay">             </div>         </section>         <div class="wrapper  poa" style="top: 0;left: 50%;margin-left: -600px;">             <div class="home-banner-content Onecad_clearfix">                 <div class="slogan-text por fl">                     <p>优质海量资源欢迎下载</p>                     <a href="" target="_blank">                         <i class="iblock poa corner" style="background:url(/js/hot.svg) no-repeat;"></i>                     </a>                     <p class="promote-sub-title line-one">                         开通VIP免费下载全站内容 </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">                                 站内                             </li>                             <li data-target="search_4" class="current">                                 站内搜索                             </li>                             <li data-target="search_5">                                 头条                             </li>                             <li data-target="search_6">                                 知乎                             </li>                             <li data-target="search_7">                                 360                             </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="search_baidu" placeholder="输入关键词 按回车搜索">                                 <button type="submit" name="" class="btn search_baidu">                                     百度搜索                                 </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="search_bing" placeholder="输入关键词 按回车搜索">                                 <button type="submit" name="" class="btn search_bing">                                     Bing搜索                                 </button>                             </form>                             <form class="search hidden" id="search_3" action="https://nuoyo.cn/?s=" method="get" target="_blank">                                 <input type="text" name="q" class="" placeholder="输入关键词 按回车搜索">                                 <button type="submit" name="" class="btn ">                                     站内搜索                                 </button>                             </form>                             <form class="search" id="search_4" action="https://nuoyo.cn/?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_5" action="https://so.toutiao.com/search?dvpf=pc&source=input&keyword=" method="get" target="_blank">                                 <input type="text" name="query" class="search_toutiao" placeholder="输入关键词 按回车搜索">                                 <button type="submit" name="" class="btn search_toutiao">                                     头条搜索                                 </button>                             </form>                             <form class="search hidden" id="search_6" action="https://www.zhihu.com/search?q=" method="get" target="_blank">                                 <input type="text" name="q" class="search_zhihu" placeholder="输入关键词 按回车搜索">                                 <button type="submit" name="" class="btn search_zhihu">                                     知乎搜索                                 </button>                             </form>                             <form class="search hidden" id="search_7" action="https://www.so.com/s?q=" method="get" target="_blank">                                 <input type="text" name="q" class="search_360" placeholder="输入关键词 按回车搜索">                                 <button type="submit" name="" class="btn search_360">                                     360搜索                                 </button>                             </form>                             <a class="hot-top text-notify" href="/tags" target="_blank" tips="标签" direction="bottom">                                 <img src="/js/rank.svg" class="icon-rank" height="15">                             </a>                         </div>                     </div>                 </div>                 <p class="home-banner-links line-one">热搜词：<a href="https://nuoyo.cn/2503.html" target="_blank">内容1</a><a href="https://nuoyo.cn/?s=%E4%BC%A0%E5%A5%87" target="_blank">内容2</a><a href="https://nuoyo.cn/" target="_blank">内容3</a><a href="https://nuoyo.cn/?s=%E8%88%AA%E6%B5%B7%E7%8E%8B" target="_blank">内容4</a><a href="https://nuoyo.cn/?s=%E7%81%AB%E5%BD%B1" target="_blank">内容5</a></p>             </div>         </div>     </div> </div> <script>     /*首页动态大图搜索开始*/     (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);     /*首页动态大图搜索结束*/ </script> <!-- 动态背景搜索html代码结束 --> 

2.CSS美化搜索模块

将下列CSS代码放入WP额外CSS中（WP后台-外观-自定义-额外css），子主题的css也可以

/*首页动态背景搜索样式代码开始*/ .search_360{     color:#fff;     background-color:#28bc5b; } .search_baidu{     color:#fff;     background-color:#4E6EF2; } .search_bing{     color:#fff;     background-color:#ffc20e; } .search_toutiao{     color:#fff;     background-color:#f04142; } .search_zhihu{     color:#fff;     background-color:#06f; } #page-wrapper { 	padding-bottom:16px; 	margin-top:-85px } .home-banner { 	height:550px; 	position:relative; 	/* z-index:1; */ 	background-position:0 100%; 	animation:gradient 12s ease-in-out infinite; } .home-banner .section { 	position:relative; 	width:100%; 	overflow:hidden; 	max-height:550px; 	height:100vh } .home-banner .section .video-wrapper { 	display:flex; 	justify-content:center; 	align-items:center; 	width:100%; 	height:100%; 	position:absolute; 	overflow:hidden; 	z-index:0 } .home-banner .section .video-wrapper video { 	visibility:visible; 	pointer-events:none; 	position:absolute; 	top:50%; 	left:50%; 	transform:translate(-50%,-50%); 	height:100%; 	width:100%; 	object-fit:cover } .home-banner .section .video-overlay { 	height:100%; 	width:100%; 	top:0; 	left:0; 	position:absolute; 	background:rgba(45,47,54,.15) } .home-banner .corner {     width: 28px;     height: 21px;     border-radius: 4px;     left: 340px;     top: 10px; } .home-banner .home-menus { 	margin-left:70px } .home-banner .home-menus .cus-dropbox-trigger a,.home-banner .home-menus>a { 	color:#fff; 	font-size:14px; 	margin-right:20px; 	line-height:60px } .home-banner .home-menus .cus-dropbox-trigger a:hover,.home-banner .home-menus>a:hover { 	color:var(--b2color); } .home-banner>.layout-center { 	height:100% } .home-banner-content {     padding-top: 130px;     margin-left: 182px;     margin-bottom: 30px; } .home-banner-content .slogan-text p { 	font-size:18px; 	line-height:24px; 	letter-spacing:2px; 	font-weight: 600;     text-shadow: 0 2px 4px rgba(0,0,0,.25); } .home-banner-content .slogan-text p:nth-of-type(1) { 	font-weight:600; 	font-size:28px; 	line-height:46px; 	letter-spacing:6px; 	text-shadow:0 2px 4px rgba(0,0,0,.25); 	margin-bottom:20px } .home-banner-search { 	width:800px; 	margin-left:209px; 	height:auto } .home-banner-search .tag {     position: absolute;     right: 100px;     top: 0;     padding: 15px 10px; } .home-banner-search .tag a:hover {     background: var(--b2color);     color: #fff; } .home-banner-search .tag a {     display: inline;     padding: 0px 8px;     border-radius: 10px;     background: #EFEFEF;     float: left;     margin: 5px;     height: 20px;     line-height: 20px;     color: #A0A0A0;     font-size: 12px; } /*.home-banner-search form {*/ /*	margin-bottom:10px;*/ /*}*/ .home-banner-search form>input { 	width:100%; 	height: 50px; 	background:#fff; 	border:none; 	padding:18px 22px; 	font-size:14px; 	color:#333; } .home-banner-search form>input::placeholder { 	color:#979797 } .home-banner-search .hot-top { 	position:absolute; 	top:13px; 	right:115px; 	color: #000; 	font-size:13px } .home-banner-search .hot-top i { 	margin-right:4px } .home-banner-search .hot-words-container,.home-banner-search .rec-words-container { 	width:100%; 	top:56px } .home-banner-links {     width: 80%;     font-size: 14px;     height: 40px;     line-height: 40px;     text-shadow: 0 2px 4px rgba(0,0,0,.27); } .home-banner-links a { 	margin-right:19px; 	color:inherit } .home-banner-links a:hover { 	color:var(--b2color); } .home-banner .search-types-cycles { 	width:106px; 	height:290px; 	background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgb(255 96 0 / 17%) 51.04%,rgba(0,0,0,0) 100%); 	left:625px; 	top:-95px; 	text-align:center; 	z-index:-1 } .home-banner .search-types-cycles .search-types-btn { 	width:100%; 	height:20px; 	line-height:20px; 	cursor:pointer; 	user-select:none; 	left:0; 	bottom:-20px; 	z-index:1 } .home-banner .search-types-cycles .search-types-btn i { 	color:#fff; 	font-size:12px } .home-banner .search-types-cycles .search-types-btn:nth-of-type(1) { 	bottom:auto; 	top:-20px } .home-banner .search-types-cycles .search-types-btn:nth-of-type(1) i { 	transform:rotate(180deg) } .home-banner .search-types-cycles .search-types-btn:hover i { 	color:var(--b2color); } .home-banner .search-types-cycles ul { 	width:100%; 	height:100%; 	padding-top:5px } .home-banner .search-types-cycles ul:after,.home-banner .search-types-cycles ul:before { 	content:''; 	width:1px; 	height:100%; 	display:block; 	position:absolute; 	left:0; 	top:0; 	background:linear-gradient(0,transparent 0,var(--b2color) 50%,transparent 100%) } .home-banner .search-types-cycles ul:after { 	left:auto; 	right:0 } .home-banner .search-types-cycles ul li { 	height:30px !important; 	line-height:30px !important; 	font-size:16px; 	text-align:center; 	cursor:pointer; 	user-select:none } .home-banner .search-types-cycles ul li:hover { 	color:var(--b2color); } .home-banner .search-types-cycles ul li:nth-of-type(4) { 	height:60px!important; 	line-height:60px!important; } .home-banner .search-types-cycles ul li a { 	color:rgba(255,255,255,.6); 	transition:none } .home-banner .search-types-cycles ul li a:hover { 	color:var(--b2color); } .home-banner .search-types-cycles button:hover { 	background:#46dacf !important; 	opacity:1; 	transition:opacity .2s } .home-banner .search-types-cycles button i { 	font-size:18px; 	color:#fff; 	margin-right:6px } .home-banner .search-types-cycles button span { 	font-size:16px; 	color:#fff } .top-navs { 	width:100%; 	/* height:70px; */ 	bottom: 0px; 	padding-top: 16px; 	left:0; 	/* padding:12px 0; */ 	/* z-index:1; */ 	backdrop-filter: blur(10px); } .top-navs .top-navs-l { 	width: calc(100% - 180px); 	display:flex; 	justify-content:center; 	align-items:center; 	margin:0 auto; 	border-right:1px solid rgb(255 255 255 / 10%) } .top-navs .top-navs-l-item { 	width:20%; 	margin:0 18px; 	display:flex; 	flex-direction:column; 	justify-content:center; 	align-items:center } .top-navs .top-navs-l-item .top-navs-l-title a { 	font-weight:600; 	font-size:18px; 	line-height:25px; 	height:25px; 	margin-bottom:12px; 	color:#fff; 	text-shadow:1px 1px 1px #000 } .top-navs .top-navs-l-item .top-navs-l-title .wz { 	font-weight:600; 	font-size:18px; 	line-height:25px; 	height:25px; 	margin-bottom:12px; 	color:#fff; 	text-shadow:1px 1px 1px #000 } .top-navs .top-navs-l-item .top-navs-l-title a i { 	font-size:34px; 	margin-right:8px; 	vertical-align:-4px } .top-navs .top-navs-l-item .top-navs-l-title a img { 	float:left; 	width:34px; 	height:34px; 	margin-right:8px; 	vertical-align:-4px; 	margin-top: -5px; } .top-navs .top-navs-l-item .top-navs-l-title a:hover { 	color:var(--b2color); } .top-navs .top-navs-l-item .top-navs-l-links { 	font-size:14px; 	line-height:20px; 	display:flex; 	justify-content:space-around; 	margin:0 -10px } .top-navs .top-navs-l-item .top-navs-l-links a { 	color:#fff; 	margin:0 10px; 	text-shadow:1px 1px 1px #000 } .top-navs .top-navs-l-item .top-navs-l-links a:hover { 	color:var(--b2color); } .top-navs .top-navs-m { 	width:176px; 	height:61px; 	border-right:1px solid rgba(255,255,255,.25); 	padding:0 24px; 	display:none; 	flex-wrap:wrap; 	justify-content:space-around; 	align-items:center } .top-navs .top-navs-m a,.top-navs .top-navs-m p,.top-navs .top-navs-m>div { 	width:50%; 	text-align:center; 	color:#fff; 	font-size:14px; 	line-height:20px; 	cursor:pointer; 	user-select:none; 	text-shadow:1px 1px 1px #000 } .top-navs .top-navs-m a:hover,.top-navs .top-navs-m p:hover,.top-navs .top-navs-m>div:hover { 	color:var(--b2color); } .top-navs .top-navs-m div p,.top-navs .top-navs-m>a { 	margin-bottom: 25px; } .top-navs .top-navs-m div p { 	width:100%; 	margin-bottom:0; 	margin-top:-20px } .top-navs .top-navs-m .top-navs-m-box { 	top:-16px; 	left:-72px; 	width:157px; 	height:66px; 	background:#444; 	border-radius:8px; 	padding:8px 14px 0; 	display:none; 	margin-top:-70px } .top-navs .top-navs-m .top-navs-m-box a { 	margin-bottom:9px } .top-navs .top-navs-m .top-navs-m-box a:hover { 	color:var(--b2color); } .top-navs .top-navs-r { 	width:176px } .top-navs .top-navs-r a { 	width:50%; 	padding-left:30px; 	text-align:center; } .top-navs .top-navs-r a i { 	font-size:36px; 	margin-bottom:10px } .top-navs .top-navs-r img { 	height: 40px; 	width: 40px; 	margin-top: -3px; } .top-navs .top-navs-r a p { 	font-size:14px; 	line-height:40px; 	color:#fff; 	text-shadow:1px 1px 1px #000 } .top-navs .top-navs-r a p:hover { 	color:var(--b2color); } .por { 	position:relative } .poa { 	position:absolute } .pof { 	position:fixed } .Onecad_clearfix:after { 	content:''; 	clear:both; 	display:block; 	height:0; 	visibility:hidden; 	font-size:0; 	line-height:0 } .fl { 	float:left } .fr { 	float:right } .ovh { 	overflow:hidden } .block { 	display:block } .icon-rank { 	width:auto; 	display:inline-block; 	border:none; 	overflow:hidden; 	vertical-align:-3px } img.icon-rank { 	width:20px; 	height:20px; 	margin-right:0px } a.hot-top.text-notify:hover { 	color:var(--b2color); } p.top-navs-l-title { 	margin-bottom:8px } .top-navs-l-title i{    	width:1em; 	height:1em; 	float: left; } .left-cont{ 	border: 5px solid rgb(255 255 255 / 18%); } .home-banner-search>form>button { 	box-sizing:border-box; 	min-width:100px; 	transform:translateY(0px); 	font-size:15px; 	border-top-right-radius:3px; 	border-bottom-right-radius:3px; 	position:absolute; 	right:1px; 	top:0; 	z-index:1; 	border:1px solid #23d1c3; 	padding:0 15px; 	width:147px; 	height:56px; 	background:linear-gradient(90deg,#35eee3 0,#21cec0 100%); 	border-radius:0 8px 8px px 0; 	right:0; 	text-align:center; 	padding-left:25px; 	margin-right:-7px; 	border-bottom-left-radius:1px; 	border-top-left-radius:1px } .home-banner-search .search.hidden { 	display:none } .primary-menus .left-cont button { 	height: 50px; 	box-sizing:border-box; 	min-width:100px; 	/* margin-left: 0px; */ 	cursor:pointer; 	color:#fff; 	font-size:15px; 	line-height:40px; 	position:absolute; 	right: 5px; 	top: 5px; 	border-radius:1px; 	padding:0 15px; 	width:106px; 	transform:translateY(0px); } .slogan-text.por.fl {     margin-left: 200px;     text-align: center;     margin-bottom: 20px; } @media screen and (max-width:768px) { 	#page-wrapper { 	display:none } } /*首页动态背景搜索样式代码结束*/ 

3.引入jquery

在主题设置-常规设置-头部html加入以下代码（header.php文件的</head>标签之前也可以）。这个B2主题好像自带，大家如果上面设置了不生效，那就引用一下，生效就不管了。

<script type='text/javascript' src='https:/你的网址/js/jquery.min.js'></script>

文件在附件下载即可

感谢您的来访，获取更多精彩文章请收藏本站。