!
您也想出现在这里吗?点击联系我们吧!
点击投个广告吧
当前位置:首页>源码分享>B2源码> B2首页背景自动换图搜索框

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

美化图:

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

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 篇。您可以继续阅读该专题下面的其它文章:

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

给TA赞助
共{{data.count}}人
人已赞助
!
您也想出现在这里吗?点击联系我们吧!
点击投个广告吧
本文共收获 0 条评论,让我们看看您的独特见解。
  • QQ
  • 微博
    暂无讨论,说说你的看法吧
个人中心

有新商品 购物车

有可用券 优惠劵
今日签到

有新私信 私信列表

有新消息 消息中心
快速搜索
关注我们
  • 手机扫码打开网页

  • 微信公众号

语言切换
返回顶部