模仿搜索引擎的界面

代码语言: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() {
        .........完整代码请登录后点击上方下载按钮下载查看

网友评论0