B2首页背景自动换图搜索框

本文是《VIP（共10篇）》专题的第 9 篇。阅读本文前，您可以先阅读前面的一些文章：

美化图：

html代码

代码放到模块管理-自定义-铺满窗口或者同宽

<div class="" style="width:100%"><div class="home-row-left content-area "><div id="html-box-shou-suo" class="html-box"><style type="text/css">
.mg-b {
  margin-bottom: -0px;
}
</style>
<div id="home-row-shyetop" class="  home_row home_row_0  module-html  " style="background-color:;">
    <div class="" style="width:100%">
        <div class="home-row-left content-area ">
            <div id="html-box-shyetop" class="html-box">
                <div id="banner_wave_1"></div>
                <div id="banner_wave_2"></div>
                <div class="user-banner mian-bgcolor wow bounceInUp animated"
                    style="visibility: visible; animation-name: bounceInUp;">
                    <div class="container xs-1">
                        <div class="ubanner-ctn col80">
                            <h2></h2>
                            <div id="main-wrap-box">
                                <div id="main-wrap">
                                    <div id="content-wrap">
                                        <form action="" method="GET" target="_blank" id="searchForm">
                                            <input id="search" type="text" placeholder="请输入关键词搜索" autocomplete="off"
                                                autofocus="">
                                            <div id="search-type"> <span id="search-type-name">站内搜索</span>
                                                <div id="search-type-icon" style="transform: rotate(0deg);"></div>
                                                <ul id="search-type-menu" style="display: none;">
                                                    <li data-engine-start="https://www.xiaohulizyw.com/?s="
                                                        data-engine-end=""><img
                                                            src="/img/fe99049cf99d5.png"><span>站内搜索</span>
                                                    </li>

                                                </ul>
                                            </div>
                                            <input type="submit" id="search-btn" value="">
                                        </form>
                                        <div class="searchTag"> <span><i class="b2font b2-hot"></i>热门推荐：</span> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=美化" target="_blank">美化</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=Xposed" target="_blank">Xposed</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=青龙" target="_blank">青龙</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com?s=教程" target="_blank">教程</a>
                                            <a class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="www.xiaohulizyw.com/post-category/webcode/wzym" target="_blank">建站源码</a> <a
                                                class="s-video" title="小狐狸资源屋-分享互联网资源"
                                                href="https://www.xiaohulizyw.com/?s=wordpress"
                                                target="_blank">wordpress</a>
                                        </div>
                                        <div id="movie-wrap">
                                            <a id="movie-img-a" href="" target="_blank"></a>
                                            <a id="movie-information" href="" target="_blank"></a>
                                            <a id="movie-name" href="" target="_blank"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div></div>
    </div>
</div>
<link rel="stylesheet" href="/css/sousou.css">
<script type="text/javascript" src="/css/sousou.js"></script>

[gzh2v keyword="2385" key="2385459"]

css代码:

       .user-banner {
            background: #1d1f20;
            background: url(https://www.dmoe.cc/random.php) no-repeat;
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 600px;
            background-size: cover !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            padding-top: 20px
        }

        .user-banner:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: inline-block;
            background: #221f1f;
            background: -moz-linear-gradient(left, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
            background: -webkit-linear-gradient(left, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
            background: linear-gradient(to right, rgba(34, 31, 31, 1) 0%, rgba(34, 31, 31, .4) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#221f1f', endColorstr='#66221f1f', GradientType=1)
        }

        .container {
            padding: 0;
            margin: 0 auto;
            max-width: 1250px;
        }

        .ubanner-ctn {
            margin: 110px auto 30px auto;
            position: relative;
            z-index: 1
        }

        .col80 {
            width: 80%
        }

        .ubanner-ctn h2 {
            text-align: center;
            color: #fff;
            font-size: 46px;
            font-weight: 600;
            margin-bottom: 65px;
            letter-spacing: 1px;
            text-shadow: 0 3px 6px rgba(0, 0, 0, .2)
        }

        .user-banner:after {
            animation: myfirst 250s;
            -webkit-animation: myfirst 250s;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite
        }

        .user-banner:after {
            content: "";
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: url(../img/50136295d36c3.png) repeat-y top center;
            background-size: auto;
            height: 8888px;
            opacity: .3
        }

        @keyframes myfirst {
            from {
                left: 0;
                top: 10px
            }

            to {
                top: -8000px
            }
        }

        @-webkit-keyframes myfirst {
            from {
                left: 0;
                top: 10px
            }

            to {
                top: -8000px
            }
        }

        @media (max-width:768px) {
            .xs-1 {
                overflow: unset !important
            }

            .ubanner-ctn h2 {
                margin-bottom: 30px !important
            }

            .container {
                padding: 0;
                margin: 0 auto;
                max-width: 1200px
            }

            .container {
                width: 1200px
            }

            .ubanner-ctn h2 {
                text-align: center;
                color: #fff;
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 30px;
                text-shadow: 0 3px 6px rgba(0, 0, 0, .2)
            }

            .user-banner {
                height: 230px;
                padding-top: 30px;
                position: relative;
                overflow: inherit
            }

            .ubanner-ctn {
                margin: 10px auto 30px auto;
                position: relative;
                z-index: 1;
                width: 90%
            }

            .user-banner:after {
                content: "";
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background: url(../img/50136295d36c3.png) repeat-y top center;
                background-size: 99%;
                height: 100%;
                opacity: .3
            }
        }


        #main-wrap-box {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #f4e5b3
        }

        #main-wrap {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: flex-start
        }

        #content-wrap {
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-end;
            justify-content: space-between
        }

        #searchForm {
            margin: 0;
            padding: 0;
            width: 80%;
            height: 50px;
            min-width: 700px;
            border-bottom: 1px solid #666;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        #search {
            flex: 1;
            border: 0 none;
            background: 0 0;
            outline: none;
            margin-right: 20px;
            color: #f4e5b3;
            font-size: 16px;
            text-indent: 2em
        }

        :-moz-placeholder {
            color: #f4e5b3;
            opacity: .3
        }

        ::-moz-placeholder {
            color: #f4e5b3;
            opacity: .3
        }

        #search:-ms-input-placeholder {
            color: #f4e5b3;
            opacity: .3
        }

        #search::-webkit-input-placeholder {
            color: #f4e5b3;
            opacity: .3
        }

        #search-type {
            display: flex;
            cursor: pointer;
            align-items: center;
            position: relative;
            height: 100%;
            user-select: none;
            -ms-user-select: none
        }

        #search-type:hover #search-type-name {
            opacity: 1
        }

        #search-type-name {
            margin: 0 5px 0 0;
            opacity: .5;
            transition: all .3s
        }

        #search-type-icon {
            width: 10px;
            height: 10px;
            background: url(../img/1324cb407ca35.png) no-repeat;
            background-size: cover;
            background-position: center;
            transition: all .3s;
            opacity: .5
        }

        #search-type-menu {
            list-style: none;
            position: absolute;
            left: 50%;
            top: 60px;
            transform: translateX(-50%);
            border-radius: 4px;
            border: 1px solid #f4e5b3;
            background-color: rgba(0, 0, 0, .8);
            padding: 0;
            margin: 0;
            overflow: hidden;
            display: none;
            z-index: 4
        }

        #search-type-menu li {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            flex-flow: row nowrap;
            transition: all .5
        }

        #search-type-menu li:hover {
            background-color: rgba(244, 229, 179, .1) !important
        }

        #search-type-menu li:nth-of-type(2n) {
            background-color: rgba(0, 0, 0, .1)
        }

        #search-type-menu img {
            width: 20px;
            height: 20px;
            margin: 5px 10px
        }

        #search-type-menu span {
            white-space: nowrap;
            margin: 0 30px 0 0
        }

        #search-btn {
            padding: 10px 0 10px 10px;
            width: 30px;
            height: 30px;
            margin: 0 0 0 20px;
            background: url(../img/fe99049cf99d5.png) no-repeat;
            background-size: cover;
            background-position: center;
            border: none;
            cursor: pointer;
            user-select: none;
            -ms-user-select: none;
            transition: all .2s;
            outline: none
        }

        .searchTag {
            letter-spacing: .5px;
            text-align: center;
            margin-top: 30px;
            font-size: 14px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 700px
        }

        .searchTag span {
            display: inline-block;
            transform: translateY(-1px)
        }

        .searchTag a {
            margin-right: 15px;
            color: #909399
        }

        .searchTag a:hover {
            color: #fff
        }

        .searchTag i {
            color: #ffbc32;
            margin-right: 2px;
            display: inline-block;
            transform: translateY(1px)
        }
        @media screen and (max-width:768px) {
            #main-wrap {
                width: 100%
            }

            #content-wrap {
                width: 100%
            }

            #searchForm {
                min-width: 350px;
                border-bottom: 0px solid #fff;
            }

            .searchTag {
                min-width: 100px !important
            }

            .container {
                width: 100%;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                *zoom: 1
            }
        }
        /*#banner_wave_1 {*/        /*    width: auto;*/        /*    height: 65px;*/        /*    background: url(../img/bb2dac96f12dc.png) repeat-x;*/        /*    _filter: alpha(opacity=80);*/        /*    position: absolute;*/        /*    bottom: 0;*/        /*    width: 100%;*/        /*    left: -236px;*/        /*    z-index: 1;*/        /*    opacity: 1;*/        /*    transiton-property: opacity, bottom;*/        /*    transition-duration: .4s, .4s;*/        /*    animation-name: move2;*/        /*    animation-duration: 240s;*/        /*    animation-fill-mode: backwards;*/        /*    animation-timing-function: linear;*/        /*    animation-iteration-count: infinite;*/        /*    top: 537px;*/        /*}*/      #banner_wave_1 {
    /*width: auto;*/    height: 65px;
    background: url(../img/bb2dac96f12dc.png) repeat-x;
    /*_filter: alpha(opacity=80);*/    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 1;
    opacity: 1;
    /*transiton-property: opacity, bottom;*/    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 240s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
#banner_wave_2 {
    /*width: auto;*/    height: 80px;
    background: url(../img/8151cbbe7392d.png) repeat-x;
    /*_filter: alpha(opacity=80);*/    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: 1;
    opacity: 1;
    /*transiton-property: opacity, bottom;*/    transition-duration: .4s, .4s;
    animation-name: move2;
    animation-duration: 160s;
    animation-fill-mode: backwards;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 537px;
}
/* move1锟斤拷move2锟脚拷锟斤拷鍔拷锟界瓭锟斤拷锟介悮锟斤拷鍙凤拷锟斤拷锟界祬鍑︼拷锟斤拷锟斤拷鍠濓拷锟斤拷 *//* 缇冣墻锟斤拷缇岄牭锟斤拷锟斤拷锟斤拷锟介悮锟斤拷闅欙拷锟斤拷锟界緦闋碉拷锟斤拷锟斤拷锟斤拷锟斤拷锟斤拷銉拷锟斤拷缃╋拷Chrome缇冿紴锟界畽锟斤拷锟斤拷锟斤拷*/ @keyframes move1 {
    100% {
        background-position: 100% 0;
    }
}
@keyframes move2 {
    100% {
        background-position: -100% 0;
    }
}
div #html-box-sydhls {
    z-index: 2;
}
.ubanner-ctn h2 {
            text-align: center;
            color: #fff;
            font-size: 46px;
            font-weight: 600;
            margin-bottom: 65px;
            letter-spacing: 1px;
            text-shadow: 0 3px 6px rgba(0, 0, 0, .2);
            background: url(../img/ff913110e3132.png) repeat #011F42;
            background-size: 300px auto;
            -webkit-text-fill-color: transparent;
            text-fill-color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-animation: background 12s infinite linear;
            animation: background 12s infinite linear;
        }

        @-webkit-keyframes background {
            from {
                background-position: 0 0%;
            }

            to {
                background-position: 0 -300px;
            }
        }

        @keyframes background {
            from {
                background-position: 0 0%;
            }

            to {
                background-position: 0 -300px;
            }
        }

js代码:

        window.onload = function () {
            //---------------定义搜索引擎
            var searchEngine = [
                ['站内搜索', '/img/fe99049cf99d5.png', 'https://www.muziz.cn/?s=', ''],
                ['影视检索', '/img/fe99049cf99d5.png', 'https://www.novipnoad.com/?s=', ''],
                ['小说搜索', '/img/fe99049cf99d5.png',
                    'https://www.zxcs.info/index.php?keyword=', ''],
                ['B 站视频', '/img/fe99049cf99d5.png',
                    'https://search.bilibili.com/all?keyword=', ''],
                ['百度一下', '/img/fe99049cf99d5.png', 'https://www.baidu.com/s?wd=', ''],
                ['资源检索', '/img/fe99049cf99d5.png', 'http://api.sssoou.com/search?q=', ''],
                ['优酷视频', '/img/fe99049cf99d5.png',
                    'https://so.youku.com/search_video/q_', ''],
                ['乐视视频', '/img/fe99049cf99d5.png', 'http://so.le.com/s?wd=', ''],
            ];


            var oSearchTypeMenu = document.getElementById('search-type-menu');
            oSearchTypeMenu.innerHTML = '';
            //<li><img src='static/images/movie4.jpg'><span>百度搜索</span></li>
            for (var i = 0; i < searchEngine.length; i++) {
                var oSearchTypeNewLi = document.createElement('li');
                oSearchTypeNewLi.innerHTML = "<img src=''><span></span>";
                oSearchTypeNewLi.dataset.engineStart = searchEngine[i][2];
                oSearchTypeNewLi.dataset.engineEnd = searchEngine[i][3];
                oSearchTypeNewLi.children[0].src = searchEngine[i][1];
                oSearchTypeNewLi.children[1].innerHTML = searchEngine[i][0];

                oSearchTypeMenu.appendChild(oSearchTypeNewLi);
            }

            //---------------切换搜索引擎
            var oSearchType = document.getElementById('search-type');
            var oSearchTypeIcon = document.getElementById('search-type-icon');
            oSearchType.onclick = function () {
                if (oSearchTypeMenu.style.display == 'block') {
                    oSearchTypeMenu.style.display = 'none';
                    oSearchTypeIcon.style.transform = 'rotate(0deg)';
                } else {
                    oSearchTypeMenu.style.display = 'block';
                    oSearchTypeIcon.style.transform = 'rotate(180deg)';
                }
            }

            var oSearchTypeLi = oSearchTypeMenu.getElementsByTagName('li');
            var oSearchTypeName = document.getElementById('search-type-name');
            var oSearchLinkStart = '';
            var oSearchLinkEnd = '';

            //切换搜索引擎函数
            function changeSearchType(i) {
                oSearchLinkStart = searchEngine[i][2];
                oSearchLinkEnd = searchEngine[i][3];
                oSearchTypeName.innerHTML = searchEngine[i][0];
                window.localStorage.setItem('searchType', i);
            }
            for (var i = 0; i < oSearchTypeLi.length; i++) {
                oSearchTypeLi[i].index = i;
                oSearchTypeLi[i].onclick = function () {
                    changeSearchType(this.index);
                }
            }

            //打开页面时的引擎
            if (window.localStorage.getItem('searchType')) {
                changeSearchType(Number(window.localStorage.getItem('searchType')));
            } else {
                window.localStorage.setItem('searchType', 0);
                changeSearchType(0);
            }

            //----------------点击搜索按钮跳转
            var oSearch = document.getElementById('search');
            var oSearchBtn = document.getElementById('search-btn');
            var oSearchForm = document.getElementById('searchForm');
            oSearchForm.addEventListener("submit", function (event) {
                if (oSearch.value) {
                    window.open(oSearchLinkStart + oSearch.value.replace(/%/g, "%25").replace(/#/g, "%23").replace(
                        /\+/g, "%2B") + oSearchLinkEnd);
                } //提交搜索 以及对% #等字符转码
                else {
                    window.open(oSearchLinkStart + oSearch.placeholder + oSearchLinkEnd);
                }

                event.preventDefault();
                return false;
            });

        } //end

[/gzh2v]

文章链接：https://sjcnh.cn/2385.html
文章标题：B2首页背景自动换图搜索框
文章版权：@花醉所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！我们将在24小时内极速处理！
本文最后更新发布于2024年12月15日 23时38分03秒，某些文章具有时效性，若有错误或已失效，请在下方留言或联系：841134898@qq.com

您已阅读完《VIP（共10篇）》专题的第 9 篇。您可以继续阅读该专题下面的其它文章：

1.自动渐变背景

↡ 点击展开全文 ↡

本文声明本站上的部份代码，教程，软件，插件来自会员发布以及互联网收集，不代表本站立场，仅供网友个人学习交流或测试研究使用，未经原版权作者许可，禁止用于任何商业途径！请用户仔细辨认内容的真实性，避免上当受骗！本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。请在下载24小时内删除！若您喜欢本文可附上原文链接随意转载。如无意侵害了您的权益，请发送邮件至 841134898@qq.com 或点击右侧私信：花醉反馈，我们将尽快处理。如果遇到付费才可观看的文章，建议升级终身VIP。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩，为防止有人压缩软件不支持7z格式，建议下载7-zip。zip、rar解压，建议下载WinRAR。