ylsislove
/
aayu-today
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

commit

master
wangyu 3 years ago
commit
fe0e369647
25 changed files with 794 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      css/img/1logo.gif
  2. BIN
      css/img/avatar.jpg
  3. BIN
      css/img/bg.png
  4. BIN
      css/img/logo.gif
  5. BIN
      css/img/scbaidu.png
  6. BIN
      css/img/scbing.png
  7. BIN
      css/img/scgoogle.png
  8. 441
    0
      css/style.css
  9. BIN
      img/bilibili.png
  10. BIN
      img/blog.png
  11. BIN
      img/douyin.png
  12. BIN
      img/fanyi.png
  13. BIN
      img/huya.png
  14. BIN
      img/kedao.png
  15. BIN
      img/liuyan.png
  16. BIN
      img/taobao.png
  17. BIN
      img/toutiao.png
  18. BIN
      img/xiangce.png
  19. BIN
      img/youxiang.png
  20. BIN
      img/yunpan.png
  21. 82
    0
      index.html
  22. 2
    0
      js/jquery.min.js
  23. 261
    0
      js/keyword.js
  24. BIN
      logo.ico
  25. 8
    0
      manifest.json

BIN
css/img/1logo.gif View File


BIN
css/img/avatar.jpg View File


BIN
css/img/bg.png View File


BIN
css/img/logo.gif View File


BIN
css/img/scbaidu.png View File


BIN
css/img/scbing.png View File


BIN
css/img/scgoogle.png View File


+ 441
- 0
css/style.css View File

* {
padding: 0;
margin: 0
}
body {
text-align: center;
/* background-color: #ffffff; */
background-image: url("./img/bg.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* opacity:0.2; */
}
img.smaller {
width: 540;
height: 195;
/* max-width: 300px; */
animation: flipInX 2s;
-webkit-animation: flipInX 2s
}
.logo {
font-size: 32px;
white-space: normal;
word-wrap: break-word;
text-decoration: none;
color: #232323;
padding-bottom: 15px;
}
#search_input {
width: 90%;
height: 60px;
background-color: transparent;
border: none;
outline: 0;
font-size: 18px;
padding: 0 20px;
border-radius: 50px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#search_keyword {
padding-right: 50px;
height: 60px;
background-color: transparent;
border: none;
outline: 0;
font-size: 18px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.search_part {
/*margin-bottom: 50px;*/
margin-top: 20px
}
span {
display: block;
overflow: hidden;
padding-left: 5px;
/* vertical-align: middle */
}
.search-section {
box-shadow: 0 0 18px rgba(70,70,40,.255);
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
background-color: rgba(255,255,255,.100);
border-radius: 40px;
display: table;
vertical-align: middle;
width: 80%;
height: 60px;
max-width: 800px;
margin: 10px auto
}
#search_submit {
outline: 0;
height: 40px;
float: right;
color: #eee;
font-size: 16px;
font-weight: 700;
border: none;
background-color: transparent;
padding: 0 13px 0 13px
}
#content {
width: 100%;
text-align: center;
padding-top: 15px;
top: 50%;
height: 100px;
margin-top: 180px
}
@media screen and (max-width: 1500px){#content{margin-top: 80px;}}
.search-section {
z-index:10;
}
.boxs {
margin: 50px auto;
z-index:-1;
max-width: 900px;
}
@media screen and (max-width: 900px){.boxs{max-width: 390px;}}
.box {
position: relative;
display: inline-block;
width: 100px;
border: 0;
animation: fadeInDown 1s;
-webkit-animation: fadeInDown 1s;
}
@media screen and (max-width: 900px){.box{width: 90px;}}
.box a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0
}
.url {
color: #000000;
height: 32px;
line-height: 32px;
width: 72px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
margin: auto;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
padding-top: 3px;
padding-bottom: 8px
}
.icon {
width: 64px;
height: 64px;
max-width: 72px
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0);
transform: perspective(400px) rotateX(0);
opacity: 1
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0);
-ms-transform: perspective(400px) rotateX(0);
transform: perspective(400px) rotateX(0);
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
* {
padding: 0;
margin: 0
}
li {
list-style: none;
}
li a{
border-radius: 16px;
background: #d5d5d5;
padding: 0px 15px;
}
li a:hover{
background: #e9e9e9;
}
#btn {
width: 560px;
padding: 10px 10px;
border: 1px solid rgb(45,129,240)
}
a {
display: inline-block;
text-decoration: none;
color: rgba(0,0,0,0.8);
outline: none;
line-height: 35px
}
.search-section {
margin-top: 14px;
margin-bottom: 40px;
}
.search-section {
position: relative;
display: flex;
}
.search-left {
display: flex;
width: 100%;
}
.search-logo {
padding-left: 80px;
align-items: center;
justify-content: center;
background: url("./img/scgoogle.png") center center no-repeat;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
cursor: pointer;
transition-duration: 100ms;
}
.search-logo:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: alpha(opacity=20);
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
transition-duration: 100ms;
}
.search-methods {
display: none;
position: absolute;
border-style: none;
top: -32px;
left: -1px;
width: 80px;
border-radius: 40px;
border: 1px solid rgba(217, 217, 217, 0.96);
background-color: #fff;
box-shadow: 0 0 18px rgb(70 70 40 / 26%);
}
.search-methods:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.search-methods li {
margin: 0 20px;
background: url("./img/scgoogle.png") 10px no-repeat;
overflow: hidden;
color: #545454;
cursor: pointer;
border-style: none;
height: 40px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: alpha(opacity=20);
-moz-opacity: 0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
}
.search-logo.baidu, li.baidu {
background-image: url("./img/scbaidu.png");
}
.search-logo.bing, li.bing {
background-image: url("./img/scbing.png");
}
.search-methods li:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
.search-result {
display: none;
position: absolute;
width: 80%;
top: 65px;
left: 10%;
border: 1px solid rgba(187, 187, 187, 1);
background-color: #fff;
white-space: nowrap;
overflow: hidden;
}
.result-item {
height: 34px;
line-height: 34px;
}
.result-item.active {
background: #F0F0F0;
}
.result-item:hover {
background-color: #eee;
cursor: pointer;
}
.input-wrap {
position: relative;
width: 100%;
margin-left: -5px;
}
.input-wrap .search-input {
width: 100%;
}
.input-wrap .clear-keyword {
display: none;
position: absolute;
top: 47%;
right: 25px;
transform: translateY(-50%);
cursor: pointer;
color: #d2d2d2;
font-size: 34px;
}
@media screen and (max-width: 900px){.input-wrap .clear-keyword{top: 50%;}}
.search-item {
padding: 0 0 0 5px;
}

BIN
img/bilibili.png View File


BIN
img/blog.png View File


BIN
img/douyin.png View File


BIN
img/fanyi.png View File


BIN
img/huya.png View File


BIN
img/kedao.png View File


BIN
img/liuyan.png View File


BIN
img/taobao.png View File


BIN
img/toutiao.png View File


BIN
img/xiangce.png View File


BIN
img/youxiang.png View File


BIN
img/yunpan.png View File


+ 82
- 0
index.html View File


<!-- saved from url=(0021)https://go.jakehu.cn/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿宇导航页</title>
<link rel="icon" type="image/ico" href="logo.ico"><meta name="description" content="阿宇导航页是一个简单，纯粹的电脑导航网站。">
<meta name="keywords" content="Aayu,Aayu.today,阿宇,极简导航,主页">
<link href="./css/style.css" rel="stylesheet" type="text/css">
<script src="./js/jquery.min.js"></script>
<script src="./js/keyword.js"></script>
</head>

<body>
<div id="content">
<div class="search_part">
<a class="logo" href="https://nav.aayu.today/" target="_blank">
<!-- <img class="smaller" src="./css/img/logo.gif"> -->
</a>
</div>

<div id="search_form" class="search-section" target="_blank">
<div class="search-left">
<div id="search_logo" data-type="baidu" class="search-logo bing"></div>
<div class="input-wrap">
<input id="search_keyword" class="search-input" name="keyword" autocomplete="off" type="text">
<div class="clear-keyword" id="clear_keyword" title="清空">×</div>
</div>
<ul id="search_methods" class="search-methods">
<li data-type="baidu" class="search-item baidu"></li>
<li data-type="bing" class="search-item bing"></li>
<li data-type="google" class="search-item google"></li>
</ul>
<ul id="search_result" class="search-result"></ul>
</div>
</div>

<div class="boxs">
<div class="box">
<a href="https://mail.qq.com/" class="click"></a>
<p><img class="icon" src="./img/youxiang.png"></p>
<p class="url">邮箱</p>
</div>
<div class="box">
<a href="https://fanyi.baidu.com/" class="click"></a>
<p><img class="icon" src="./img/fanyi.png"></p>
<p class="url">翻译</p>
</div>
<div class="box">
<a href="https://blog.aayu.today/" class="click"></a>
<p><img class="icon" src="./img/blog.png"></p>
<p class="url">博客</p>
</div>
<div class="box">
<a href="http://code.aayu.today/" class="click"></a>
<p><img class="icon" src="./img/kedao.png"></p>
<p class="url">代码</p>
</div>
<div class="box">
<a href="https://pan.aayu.today/" class="click"></a>
<p><img class="icon" src="./img/yunpan.png"></p>
<p class="url">云盘</p>
</div>
<div class="box">
<a href="https://photo.aayu.today/" class="click"></a>
<p><img class="icon" src="./img/xiangce.png"></p>
<p class="url">相册</p>
</div>
<div class="box">
<a href="https://www.taobao.com/" class="click"></a>
<p><img class="icon" src="./img/taobao.png"></p>
<p class="url">淘宝</p>
</div>
<div class="box">
<a href="https://www.bilibili.com/" class="click"></a>
<p><img class="icon" src="./img/bilibili.png"></p>
<p class="url">B站</p>
</div>
</div>
</div>
</body></html>

+ 2
- 0
js/jquery.min.js
File diff suppressed because it is too large
View File


+ 261
- 0
js/keyword.js View File

$(function () {
// 默认搜索引擎记录
var searchTypeStore = {
set: function (type) {
localStorage.setItem('SearchType', type);
},
get: function () {
return localStorage.getItem('SearchType') || 'bing';
},
};
var $searchMethods = $('#search_methods');
var $searchLogo = $('#search_logo');
var initSearchType = searchTypeStore.get();
$searchLogo.addClass(initSearchType).data('type', initSearchType);
var search_types = [
{ url: 'https://www.baidu.com/s?wd=', type: 'baidu' },
{ url: 'https://www.sogou.com/web?query=', type: 'sogou' },
{ url: 'https://cn.bing.com/search?q=', type: 'bing' },
{ url: 'https://www.so.com/s?q=', type: 'so' },
{ url: 'https://www.google.com/search?q=', type: 'google' },
{ url: 'http://www.cilimao.cc/search?word=', type: 'cili' },
{ url: 'http://neets.cc/search?key=', type: 'yingyin' },
{ url: 'http://www.panduoduo.net/s/name/', type: 'wangpan' },
];
$searchLogo.on('click', function () {
$searchMethods.fadeIn(100);
});
// 搜索引擎切换
$searchMethods.on('click', 'li', function () {
var type = $(this).data('type');
searchTypeStore.set(type);
$searchLogo.removeClass()
.data('type', type)
.addClass(type + ' search-logo');
$searchMethods.fadeOut(100);
$('#search_keyword').focus();
});
$searchMethods.on('mouseleave', function () {
$searchMethods.fadeOut(100);
});
var EVENT_CLEAR_KEYWORD = 'clearKeyword';
var EVENT_SEARCH = 'search';
// 关键词搜索输入
$('#search_keyword').on('keyup', function (event) {
var keyword = $(this).val();
if(event.which==13){
if($('#search_result .active').length>0){
keyword = $('#search_result .active').eq(0).text();
}
openSearch(keyword)
return;
}
// TODO 上下键选择待选答案
var bl = moveChange(event);
if(bl){
keywordChange(keyword);
}
}).on('blur', function () {
// 推荐结果跳转
$('#search_result').on('click', 'li', function () {
var word = $(this).text();
$('#search_keyword').val(word);
openSearch(word);
$('#search_result').hide();
});
// 解决失焦和点击事件冲突问题
setTimeout(function() {
$('#search_result').hide();
}, 100)
}).on('focus', function () {
var keyword = $(this).val();
keywordChange(keyword);
});
function moveChange(e){
var k = e.keyCode || e.which;
var bl = true;
switch(k){
case 38:
rowMove('top');
bl = false;
break;
case 40:
rowMove('down');
bl = false;
break;
}
return bl;
}
function rowMove(move){
var search_result = $('#search_result');
var hove_li = null;
search_result.find('.result-item').each(function(){
if($(this).hasClass('active')){
hove_li = $(this).index();
}
});
if(move == 'top'){
if(hove_li==null){
hove_li = search_result.find('.result-item').length-1;
}else{
hove_li--;
}
}else if(move == 'down'){
if(hove_li==null){
hove_li = 0;
}else{
hove_li==search_result.find('.result-item').length-1?(hove_li=0):(hove_li++);
}
}
search_result.find('.active').removeClass('active');
search_result.find('.result-item').eq(hove_li).addClass('active');
$('#search_keyword').val(search_result.find('.result-item').eq(hove_li).addClass('active').text());
}
function keywordChange(keyword) {
if (keyword === '') {
$(document).trigger(EVENT_CLEAR_KEYWORD);
} else {
$(document).trigger(EVENT_SEARCH, keyword);
$('#clear_keyword').show();
}
}
// 清空输入框
$('#clear_keyword').on('click', function () {
$('#search_keyword').val('');
$('#search_keyword').focus();
$(document).trigger(EVENT_CLEAR_KEYWORD);
});
// 搜索
$('#search_submit').on('click', function () {
var keyword = $('#search_keyword').val();
var type = getSeachType();
var baseUrl = search_types.find(function (item) {
return item.type === type;
});
if (baseUrl && keyword) {
window.open(baseUrl.url + keyword);
}
});
$(document).on(EVENT_CLEAR_KEYWORD, function () {
$('#clear_keyword').hide();
$('#search_result').hide();
});
$(document).on(EVENT_SEARCH, function (e, keyword) {
getSearchResult(keyword);
});
// 获取搜索引擎类型
function getSeachType() {
return $('#search_logo').data('type');
}
// google 搜索结果
function searchResultGoogle(data) {
var result = data[1];
result = result.map(function (item) {
return item[0];
});
renderSearchResult(result);
}
// 百度 搜索结果
function searchResultBaidu(data) {
if (data === undefined) {
return;
}
var result = data.s;
renderSearchResult(result);
}
// 渲染搜索结果
function renderSearchResult(array) {
var $result = $('#search_result');
$result.empty().hide();
if (!array || array.length <= 9) {
return;
}
for (var i = 4; i < array.length; i++) {
var $li = $('<li class=\'result-item\'></li>');
$li.text(array[i]);
$result.append($li);
}
$result.show();
}
window.searchResultGoogle = searchResultGoogle;
window.searchResultBaidu = searchResultBaidu;
var search_suggest = {
baidu: {
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data: function (keyword) {
return {
wd: keyword,
cb: 'window.searchResultBaidu',
};
},
},
google: {
url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data: function (keyword) {
return {
wd: keyword,
cb: 'window.searchResultBaidu',
};
},
},
google2: {
url: 'http://suggestqueries.google.com/complete/search',
data: function (keyword) {
return {
q: keyword,
jsonp: 'window.searchResultGoogle',
client: 'youtube',
};
},
},
wangpan: {
url: 'http://unionsug.baidu.com/su',
data: function (keyword) {
return {
wd: keyword,
cb: 'window.searchResultBaidu',
};
},
},
};
function getSearchResult(keyword) {
var searchType = getSeachType();
var suggest = search_suggest[searchType];
if (!suggest) {
suggest = search_suggest.baidu;
}
$.ajax({
url: suggest.url,
dataType: 'jsonp',
data: suggest.data(keyword),
});
}
function openSearch(keyword) {
var type = getSeachType();
var baseUrl = search_types.find(function (item) {
return item.type === type;
});
if (baseUrl && keyword) {
window.open(baseUrl.url + keyword, keyword);
}
}
});

BIN
logo.ico View File


+ 8
- 0
manifest.json View File

{
"chrome_url_overrides": {
"newtab": "index.html"
},
"manifest_version": 3,
"name": "myextension_newtab",
"version": "1.0.0"
}

Write Preview
Loading…
Cancel
Save