elmgates/ChineseBQB
1
0
Fork 0
mirror of https://github.com/zhaoolee/ChineseBQB.git synced 2026-01-12 13:44:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

zhaoolee commit

Browse Source
This commit is contained in:
zhaoolee
2020-10-06 15:07:51 +08:00
parent 96acbae63f
commit 5d52b04295
7 changed files with 195 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
index.html
View File

@@ -15,15 +15,100 @@
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="./cdn/material.indigo-pink.min.css"
/>
<script src="./cdn/material.min.js"></script>
<link
rel="stylesheet"
href="./cdn/MaterialIcons.css"
/>
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> -->
<body>
<!-- 抽屉 -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<!-- <span class="mdl-layout-title">目录</span> -->
<div style="text-align: center;">
<div style="height: 20px"></div>
<img
src="./icon.png"
width="100"
height="100"
class="d-inline-block align-top lazyload"
alt=""
/>
</div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="https://v2fy.com/">V2方圆</a>
<a class="mdl-navigation__link" href="https://github.com/zhaoolee/ChineseBQB">ChineseBQB 开源地址</a>
<a class="mdl-navigation__link" href="https://raw.githubusercontent.com/zhaoolee/ChineseBQB/master/chinesebqb_github.json">ChineseBQB 开放数据源</a>
<a class="mdl-navigation__link" href="https://v2fy.com/ChineseBQB/">ChineseBQB 留言板</a>
<a class="mdl-navigation__link" href="mailto:info@gaotengasset.com">联系作者，贡献表情包!</a>
<a class="mdl-navigation__link" href="https://github.com/zhaoolee/ChineseBQB/graphs/contributors">贡献者列表</a>
<a class="mdl-navigation__link" href="https://fangyuanstu.com/">图标设计:老罗巴扎嘿</a>
<a class="mdl-navigation__link" href="http://www.beian.miit.gov.cn/">琼ICP备18002320号-2</a>
<a class="mdl-navigation__link" href="https://www.v2fy.com/asset/0i/ChineseBQB/chinesebqb-md/000readme-chinesebqb.assets/ba5b30723b85810c5a8a42be8ead4161.jpeg">捐赠</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div style="height: 50px"></div>
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#" style="line-height: 30px;">
<img
src="./icon.png"
width="30"
height="30"
class="d-inline-block align-top lazyload"
alt=""
/>
PP制造计划开源表情包 ChineseBQB
</a>
</nav>
<div style="height: 30px"></div>
<div class="input-group mb-3">
<input
type="text"
id="bqb_key"
class="form-control"
placeholder="请输入表情包关键词~"
aria-label="Recipient's usernam"
aria-describedby="button-addon2"
/>
</div>
<div id="imgs_container">暂无匹配的表情包</div>
</div>
</main>
</div>
<style>
body {
margin: 20px;
margin: 0px;
background-color: #f5efe0;
}
.page-content {
padding-left: 18px;
padding-right: 18px;
}
#imgs_container {
@@ -39,9 +124,24 @@
.card-title {
font-size: 0.6rem;
}
.no_bqb{
border: 1px solid #dddddd;
border-radius: 6px;
height: 300px;
line-height:300px;
width: 100%;
text-align: center;
color: #111111;
font-size:20px;
}
</style>
<nav class="navbar navbar-light bg-light">
<!-- <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img
src="https://www.v2fy.com/asset/0i/ChineseBQB/icon.jpg"
@@ -52,41 +152,31 @@
/>
PP制造计划开源表情包
</a>
</nav>
<div style="height: 50px"></div>
<div class="input-group mb-3">
<input
type="text"
id="bqb_key"
class="form-control"
placeholder="请输入表情包关键词"
aria-label="Recipient's usernam"
aria-describedby="button-addon2"
/>
</div>
<div id="imgs_container">暂无匹配的表情包</div>
</nav> -->
<!-- 数据源https://www.v2fy.com/asset/0i/ChineseBQB/chinesebqb_v2fy.json -->
<script>
function bqb_lazyload(){
function imgs_container_is_null(){
//  启用lazyload
$("img.lazy").lazyload({
// 可以代替img里面src属性中的值
// placehoder:"img/viper_1.jpg"
//
// 图片载入时的效果
placeholder:"img/loading.jpg",
effect: "fadeIn"
});
var bqb_html = `<div class="no_bqb">暂无匹配的表情包</div>`;
$("#imgs_container").html(bqb_html);
}
function bqb_lazyload() {
//  启用lazyload
$("img.lazy").lazyload({
// 可以代替img里面src属性中的值
// placehoder:"img/viper_1.jpg"
//
// 图片载入时的效果
placeholder: "img/loading.jpg",
effect: "fadeIn"
});
}
function debounce(fn, wait) {
var timer = null;
@@ -105,12 +195,14 @@
async function change_img(key_val, chinesebqb_v2fy) {
key_val_img_info_list = [];
if (key_val !== "") {
if (key_val !== "") {
var chinesebqb_v2fy_data = chinesebqb_v2fy.data;
let img_inner_html = "";
for (
if(chinesebqb_v2fy_data.length !==0){
for (
var m = 0,
chinesebqb_v2fy_data_length = chinesebqb_v2fy_data.length;
m < chinesebqb_v2fy_data_length;
@@ -141,12 +233,21 @@
$("#imgs_container").html(img_inner_html);
// 重新加懒加载
bqb_lazyload();
}else{
imgs_container_is_null();
}
} else {
$("#imgs_container").html("暂无匹配的表情包");
imgs_container_is_null();
}
}
@@ -154,6 +255,9 @@
// document.getElementById("bqb_key").focus()
$(function() {
imgs_container_is_null();
// 读取localStorage key_val 并写入input
var key_val = localStorage.getItem("key_val");
@@ -188,7 +292,7 @@
// 聚焦
$("#bqb_key").focus();
bqb_lazyload();
bqb_lazyload();
});
});
</script>