模仿搜索引擎的界面-html代码-BFW代码库

模仿搜索引擎的界面

代码语言：html

所属分类：搜索

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var helangSearch = {
            els: {}, searchIndex: 0, hot: {
                color: ['#ff2c00', '#ff5a00', '#ff8105', '#fd9a15', '#dfad1c', '#6bc211', '#3cc71e', '#3cbe85', '#51b2ef', '#53b0ff'], list: ['helang.love@qq.com', 'qq:1846492969', 'web前端梦之蓝', '公众号：web-7258', 'jQuery插件库', 'CSDN-IT博客', 'jQuery之美-CSDN博客专栏', 'bfw.wiki.com', 'csdn.net', 'mydarling.gitee.io']}, init: function() {
                var _this = this; 
                this.els = {
                    pickerBtn: $(".picker"), pickerList: $(".picker-list"), logo: $(".logo"), hotList: $(".hot-list"), input: $("#search-input"), button: $(".search")}; this.els.hotList.html(function() {
                        var str = ''; $.each(_this.hot.list, function(index, item) {
                            str += '<a href="https://www.baidu.com/s?ie=utf8&oe=utf8&tn=98010089_dg&ch=11&wd='+item+'" target="_blank">'
                            +'<div class="number" style="color: '+_this.hot.color[index]+'">'+(index+1)+'</div>'
                            +'<div>'+item+'</div>'
                            +'</a>';
                        }); return str;
                    }); this.els.pickerBtn.click(function() {
                        if (_this.els.pickerList.is(':hidden')) {
                            setTimeout(function() {
                                _this.els.pickerList.show();
                            }, 100);
                        }}); this.els.pickerList.on("click", ">li", function() {
                           
                        _this.els.logo.css("background-image", ('url(/bfwrepo/image/'+$(this).data("logo")+')')); _this.searchIndex = $(this).index(); _this.els.pickerBtn.html($(this).html())}); this.els.input.click(function() {
                        if (!$(this).val()) {
                            setTimeout(function() {
                                _this.els.hotList.show();
                            }, 100);
                        }}); this.els.input.on("input", function() {
                        if ($(this).val()) {
                            _this.els.hotList.hide();
                        }}); this.els.button.click(function() {
                        var searchArr = ['百度', '谷歌']; alert(searchArr[_this.searchIndex]+"搜索："+_this.els.input.val());
                    }); $(document).click(function() {
                        _this.els.pickerList.hide(); _this.els.hotList.hide();
                    });
            }};
        bready(function() {
            helangSearch.init();
        });
    </script>
    <style>
        body {
            background: white;
            padding: 0;
            margin: 0;
            font-family: microsoft yahei,segoe ui,lucida grande,Helvetica,Arial,sans-serif;
            font-size: 14px;
            color: #333
        }

        .container {
            width: 590px;
            margin: 0 auto;
            padding-top: 100px;
            position: relative
        }

        .container:after {
            content: '';
            display: block;
            clear: both
        }

        .container>div {
            float: left
        }

        .container .logo {
            width: 100%;
            height: 120px;
            margin: 0 auto 10px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: auto 120px
        }

        .container .input {
          .........完整代码请登录后点击上方下载按钮下载查看