Compare commits
10 Commits
d3d9587cfb
...
8d2bbd90a7
| Author | SHA1 | Date | |
|---|---|---|---|
|
8d2bbd90a7 | ||
|
|
e6aac97f0e | ||
|
|
6564c739ce | ||
|
|
67dbbc322d | ||
|
|
3b8344d5b9 | ||
|
|
4cc2599af5 | ||
|
|
3fa887a659 | ||
|
|
75c87b285e | ||
|
|
3ea29f66bf | ||
|
|
f64cbc9813 |
62
README.md
62
README.md
@@ -1,61 +1 @@
|
||||
<p align="center">
|
||||
<a href="http://tool.mkblog.cn/lmbtfy/" target="_blank">
|
||||
<img src="https://user-images.githubusercontent.com/16880885/85223529-75543100-b3f6-11ea-9eb4-6088c1199c74.jpg" alt="让我帮你百度一下">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 align="center"> 「Let Me Baidu That For You」</h3>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/mengkunsoft/lmbtfy/stargazers" target="_blank">
|
||||
<img src="https://img.shields.io/github/stars/mengkunsoft/lmbtfy.svg?style=flat-square" alt="GitHub stars">
|
||||
</a>
|
||||
<a href="https://github.com/mengkunsoft/lmbtfy/network" target="_blank">
|
||||
<img src="https://img.shields.io/github/forks/mengkunsoft/lmbtfy.svg?style=flat-square" alt="GitHub forks">
|
||||
</a>
|
||||
<a href="https://github.com/mengkunsoft/lmbtfy/issues" target="_blank">
|
||||
<img src="https://img.shields.io/github/issues/mengkunsoft/lmbtfy.svg?style=flat-square" alt="GitHub issues">
|
||||
</a>
|
||||
<a href="https://github.com/mengkunsoft/lmbtfy/blob/master/LICENSE" target="_blank">
|
||||
<img src="https://img.shields.io/github/license/mengkunsoft/lmbtfy.svg?style=flat-square" alt="GitHub license">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
让我帮你百度一下 - 优化版
|
||||
|
||||
原始版本来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上进行了重置，风格变更为新版百度 UI，并适配了移动端
|
||||
|
||||
交互效果参考了 不会百度么？(http://buhuibaidu.me/)
|
||||
|
||||
### 在线演示
|
||||
-----
|
||||
|
||||
[http://tool.mkblog.cn/lmbtfy/](http://tool.mkblog.cn/lmbtfy/)
|
||||
|
||||
|
||||
### 相关项目
|
||||
-----
|
||||
|
||||
- Let Me Google That For You https://github.com/xb2016/lmgtfy
|
||||
- Let Me Baidu That For You 原版 https://github.com/bangbang93/lmbtfy.cn
|
||||
|
||||
### 更新日志
|
||||
-----
|
||||
|
||||
#### 2020/6/21
|
||||
- 重构项目，风格与新版百度 UI 适配。 **注意：本版本修改了参数的获取方式，与旧版不兼容！如果你曾经使用了旧版，那么不要替换为新版，否则以前生成的网址全部会失效**
|
||||
- 移除短网址模块
|
||||
- 增加点击指示特效
|
||||
|
||||
#### 2019/10/14
|
||||
- 将网址缩短接口替换为搜狗接口，修复无法生成短网址的问题
|
||||
|
||||
#### 2019/4/27
|
||||
- 修复因 CDN 失效导致无法使用的问题
|
||||
- 重构部分代码，界面更美观
|
||||
|
||||
#### 2017/3/16
|
||||
- 将界面修改为响应式，以适应移动端访问
|
||||
|
||||
#### 更早的版本
|
||||
- 原始代码来自 bangbang(http://lmbtfy.cn/)
|
||||
魔改自[mengkunsoft/lmbtfy](https://github.com/mengkunsoft/lmbtfy)
|
||||
|
||||
340
css/style.css
340
css/style.css
@@ -1,339 +1 @@
|
||||
html, body,
|
||||
div, section, header, footer,
|
||||
button, input, textarea,
|
||||
p, ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* 搜索框 */
|
||||
#search {
|
||||
position: relative;
|
||||
height: 40%;
|
||||
min-height: 314px;
|
||||
max-height: 510px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#search-form {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.search-form-group {
|
||||
position: relative;
|
||||
max-width: 655px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-form-input {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 108px;
|
||||
vertical-align: top;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-form-input input {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 10px 0 0 10px;
|
||||
border: 2px solid #c4c7ce;
|
||||
border-right: none;
|
||||
background: #fff;
|
||||
color: #222;
|
||||
}
|
||||
.search-form-group input:hover {
|
||||
border-color: #9195a3;
|
||||
}
|
||||
.search-form-group input:focus {
|
||||
border-color: #4e6ef2;
|
||||
}
|
||||
|
||||
.search-form-group button {
|
||||
cursor: pointer;
|
||||
width: 108px;
|
||||
height: 44px;
|
||||
line-height: 45px;
|
||||
padding: 0;
|
||||
background: #4e6ef2;
|
||||
border-radius: 0 10px 10px 0;
|
||||
font-size: 17px;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
font-weight: 400;
|
||||
border: none;
|
||||
outline: 0;
|
||||
float: right;
|
||||
z-index: 1;
|
||||
}
|
||||
.search-form-group button:active {
|
||||
background-color: #4662d9;
|
||||
}
|
||||
.search-form-group button:hover {
|
||||
background-color: #4662d9;
|
||||
}
|
||||
|
||||
.search-header {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-header h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.search-header img {
|
||||
display: inline-block;
|
||||
width: 270px;
|
||||
margin: 0 -12px -16px;
|
||||
}
|
||||
|
||||
/* 功能区 */
|
||||
#function {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 40%;
|
||||
text-align: center;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#tips {
|
||||
color: #9195a3;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#stop {
|
||||
display: none;
|
||||
border: none;
|
||||
padding: 8px 15px;
|
||||
border-radius: 100px;
|
||||
color: #bababa;
|
||||
background: #f1f1f1;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#output {
|
||||
display: none;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
#output textarea {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #c8c8c8;
|
||||
outline: none;
|
||||
}
|
||||
#output textarea:focus {
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 0 2px #4285f4;
|
||||
}
|
||||
|
||||
#output .tool-btns {
|
||||
text-align: right;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#output button {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
background: #3f89ec;
|
||||
border: none;
|
||||
margin-left: 8px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#output button:hover {
|
||||
background: #4490f7;
|
||||
}
|
||||
#output button:focus {
|
||||
background: #3a84e8;
|
||||
}
|
||||
|
||||
|
||||
/* 页脚 */
|
||||
#footer {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
background-color: #fafafa;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#footer li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.footer-left, .footer-left a {
|
||||
color: #9195a3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
float: right;
|
||||
}
|
||||
.footer-right, .footer-right a {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
|
||||
/* 鼠标指示箭头 */
|
||||
#arrow {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
z-index: 999;
|
||||
background: url(../img/arrow.png) no-repeat;
|
||||
}
|
||||
|
||||
#arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
left: -15px;
|
||||
z-index: -1;
|
||||
border-radius: 9em;
|
||||
box-shadow: 0 0 0 7px rgba(0,0,0,.4);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#arrow.active::after {
|
||||
-webkit-animation: bubble-scale 1s ease;
|
||||
animation: bubble-scale 1s ease;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bubble-scale {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 1
|
||||
}
|
||||
to {
|
||||
transform:scale(2);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubble-scale {
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 1
|
||||
}
|
||||
to {
|
||||
transform: scale(2);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 响应式优化 */
|
||||
@media screen and (max-width: 650px) {
|
||||
#search {
|
||||
margin: 0 10px;
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.search-header img {
|
||||
width: 180px;
|
||||
margin: 0 -16px -12px;
|
||||
}
|
||||
|
||||
#search-form {
|
||||
bottom: 10px;
|
||||
border: 1px solid #363636;
|
||||
}
|
||||
|
||||
.search-form-input {
|
||||
right: 81px;
|
||||
}
|
||||
|
||||
.search-form-input input {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.search-form-group button {
|
||||
width: 81px;
|
||||
height: 44px;
|
||||
padding: 0 10px;
|
||||
border: none;
|
||||
border-left: 1px solid #e8e8e8;
|
||||
border-radius: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 46px;
|
||||
white-space: nowrap;
|
||||
letter-spacing: -1px;
|
||||
color: #38f;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search-form-group button:active {
|
||||
background-color: #fdfafa;
|
||||
}
|
||||
.search-form-group button:hover {
|
||||
background-color: #fdfafa;
|
||||
}
|
||||
|
||||
#function {
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin-top: 50px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#stop {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#arrow {
|
||||
background: url(../img/hand.png) no-repeat;
|
||||
}
|
||||
}
|
||||
@charset "utf-8";html,body,div,section,header,footer,button,input,textarea,p,ul,li{margin:0;padding:0;box-sizing:border-box;font-family:Microsoft Yahei,"微软雅黑","Helvetica Neue",Helvetica,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif}img{outline:none}html,body{width:100%;height:100%;overflow-x:hidden}#search{position:relative;height:40%;min-height:314px;max-height:510px;margin:0 auto;text-align:center}#search-form{position:absolute;width:100%;bottom:0}.search-form-group{position:relative;max-width:655px;margin:0 auto}.search-form-input{position:absolute;left:0;right:108px;vertical-align:top;overflow:hidden}@media screen and (min-width:650px){.search-form-input input{width:100%;height:44px;padding:12px 16px;font-size:16px;outline:0;box-shadow:none;border-radius:10px 0 0 10px;border:2px solid #c4c7ce;border-right:none;background:#fff;color:#222}.search-form-group button{cursor:pointer;width:108px;height:44px;line-height:45px;padding:0;background:#4e6ef2;border-radius:0 10px 10px 0;font-size:17px;color:#fff;box-shadow:none;font-weight:400;border:none;outline:0;float:right;z-index:1}}@media screen and (max-width:650px){.search-form-input input{width:100%;height:49px;padding:12px 16px;font-size:16px;outline:0;box-shadow:none;border-radius:10px 0 0 10px;border:2px solid #c4c7ce;border-right:none;background:#fff;color:#222}.search-form-group button{cursor:pointer;width:108px;height:49px;line-height:45px;padding:0;background:#4e6ef2;border-radius:0 10px 10px 0;font-size:17px;color:#fff;box-shadow:none;font-weight:400;border:none;outline:0;float:right;z-index:1}}@media screen and (max-width:650px){.search-form-input{right:81px}.search-form-group button{width:81px}}.search-form-group input:hover{border-color:#9195a3}.search-form-group input:focus{border-color:#4e6ef2}.search-form-group button:active{background-color:#4662d9}.search-form-group button:hover{background-color:#4662d9}.search-header{position:absolute;bottom:60px;width:100%}.search-header h2{font-size:24px;font-weight:900}.search-header img{display:inline-block;width:270px;margin:0 -12px -16px}#function{position:absolute;width:100%;min-height:220px;text-align:center;margin-top:80px}#tips{color:#9195a3;font-size:16px}#output{display:none;width:100%;max-width:400px;margin:20px auto}#output textarea{width:100%;padding:5px 8px;border-radius:3px;border:1px solid #c8c8c8;outline:none;word-break:break-all}#output textarea:focus{border-color:#4285f4;box-shadow:0 0 2px #4285f4}#output .tool-btns{text-align:right;margin-top:8px}#output button{outline:none;cursor:pointer;color:#fff;background:#3f89ec;border:none;margin-left:8px;padding:6px 14px;border-radius:3px}#output button:hover{background:#4490f7}#output button:focus{background:#3a84e8}#footer{width:100%;position:fixed;z-index:100;bottom:0;left:0;height:40px;line-height:40px;font-size:12px;overflow:hidden;background-color:#fafafa;padding:0 20px}#footer li{list-style:none;display:inline-block;padding:0 10px}.footer-left,.footer-left a{color:#9195a3;text-decoration:none}.footer-right{float:right}.footer-right,.footer-right a{color:#bbb}#arrow{display:none;position:absolute;left:0;top:0;width:50px;height:50px;z-index:999;background:url(../img/arrow.png) no-repeat}#arrow::after{content:'';position:absolute;top:-13px;left:-15px;z-index:-1;border-radius:9em;box-shadow:0 0 0 7px rgba(0,0,0,.4);width:30px;height:30px;opacity:0}#arrow.active::after{-webkit-animation:bubble-scale 1s ease;animation:bubble-scale 1s ease}@-webkit-keyframes bubble-scale{from{transform:scale(0);opacity:1}to{transform:scale(2);opacity:0}}@keyframes bubble-scale{from{transform:scale(0);opacity:1}to{transform:scale(2);opacity:0}}@media screen and (max-width:650px){#search{margin:0 10px;height:auto;min-height:200px}.search-header img{width:180px;margin:0 -16px -12px}#search-form{bottom:10px}#function{position:relative;top:0;margin-top:50px;padding:0 10px}#stop{margin-top:30px}#footer{padding:0}#arrow{background:url(../img/hand.png) no-repeat}}
|
||||
|
||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
62
index.html
62
index.html
@@ -1,31 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Cache-Control" content="no-transform">
|
||||
<meta http-equiv="Cache-Control" content="no-siteapp">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>让我帮你百度一下 | Let Me Baidu That For You</title>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/base64.min.js"></script>
|
||||
<script src="js/clipboard.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<meta charset="utf-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Cache-Control" content="no-transform">
|
||||
<meta http-equiv="Cache-Control" content="no-siteapp">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>让我帮你百度一下</title>
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/base64.min.js"></script>
|
||||
<script src="js/clipboard.min.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
<style>
|
||||
.watermark {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 18px;
|
||||
color: rgba(0, 0, 0, 0.35); /* 35% 透明度 */
|
||||
pointer-events: none; /* 防止点击事件干扰 */
|
||||
z-index: 9999; /* 保证在最上层 */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="watermark">云晞科技</div>
|
||||
|
||||
<section id="search">
|
||||
<div class="search-header">
|
||||
<h2>
|
||||
<span class="let-me">让我帮你</span>
|
||||
<img src="img/baidu_logo.png" alt="百度" title="让我帮你百度一下">
|
||||
<span class="for-you">一下</span>
|
||||
</h2>
|
||||
<h2><img src="img/baidu_logo.png" alt="百度" title="让我帮你百度一下"></h2>
|
||||
</div>
|
||||
|
||||
<form id="search-form">
|
||||
<div class="search-form-group">
|
||||
<div class="search-form-input">
|
||||
@@ -35,12 +42,9 @@
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
<section id="function">
|
||||
<p id="tips">输入一个问题，然后点击百度一下</p>
|
||||
|
||||
<button id="stop">快停下！我是自己人</button>
|
||||
|
||||
<div id="output">
|
||||
<textarea id="url-output" rows="3" readonly></textarea>
|
||||
<div class="tool-btns">
|
||||
@@ -49,18 +53,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<footer id="footer">
|
||||
<ul class="footer-left">
|
||||
<li><a href="https://github.com/mengkunsoft/lmbtfy" target="_blank">源码下载</a></li>
|
||||
<li><a href="http://lab.mkblog.cn/" target="_blank">更多好玩</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="footer-right">
|
||||
<li>* 本站与百度公司没有任何联系，baidu 以及本站出现的百度公司 Logo 是百度公司的商标</li>
|
||||
<li>*本站与百度公司没有任何联系，baidu以及本站出现的百度公司Logo是百度公司的商标</li>
|
||||
</ul>
|
||||
</footer>
|
||||
|
||||
<div id="arrow"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
124
js/script.js
124
js/script.js
@@ -1,124 +1,4 @@
|
||||
/**
|
||||
* 让我帮你百度一下【重置版】
|
||||
* GitHub 开源地址：https://github.com/mengkunsoft/lmbtfy
|
||||
**
|
||||
* 原始版本来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上进行了重置，风格变更为新版百度 UI，并适配了移动端
|
||||
* 交互效果参考了 不会百度么？(http://buhuibaidu.me/)
|
||||
**
|
||||
* 转载或使用时，还请保留以上信息，谢谢！
|
||||
* 修改自：https://github.com/mengkunsoft/lmbtfy
|
||||
*/
|
||||
|
||||
/* 扩展一个getUrlParam的方法 */
|
||||
$.getUrlParam = function(name){
|
||||
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (r !== null) return unescape(r[2]); return null;
|
||||
};
|
||||
|
||||
$(function() {
|
||||
var $kw = $('#kw'),
|
||||
$searchSubmit = $('#search-submit');
|
||||
$urlOutput = $('#url-output'),
|
||||
$tips = $('#tips'),
|
||||
$stop = $('#stop'),
|
||||
$arrow = $('#arrow');
|
||||
|
||||
var stepTimeout, typeInterval;
|
||||
|
||||
/* 获取并解析查询参数 */
|
||||
var query = $.getUrlParam('q');
|
||||
if(!!query) {
|
||||
try {
|
||||
query = Base64.decode(query);
|
||||
} catch(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
if(!!query) {
|
||||
$tips.html('让我来教你正确的打开方式');
|
||||
$stop.fadeIn();
|
||||
|
||||
stepTimeout = setTimeout(function() {
|
||||
$tips.html('1、找到输入框并选中');
|
||||
|
||||
$arrow.removeClass('active').show().animate({
|
||||
left: $kw.offset().left + 20 + 'px',
|
||||
top: ($kw.offset().top + $kw.outerHeight() / 2) + 'px'
|
||||
}, 2000, function () {
|
||||
$tips.html('2、输入你要找的内容');
|
||||
$arrow.addClass('active');
|
||||
|
||||
stepTimeout = setTimeout(function() {
|
||||
$arrow.fadeOut();
|
||||
|
||||
var i = 0;
|
||||
typeInterval = setInterval(function () {
|
||||
$kw.val(query.substr(0, i));
|
||||
if (++i > query.length) {
|
||||
clearInterval(typeInterval);
|
||||
$tips.html('3、点击下“百度一下”按钮');
|
||||
|
||||
$arrow.removeClass('active').show().animate({
|
||||
left: $searchSubmit.offset().left + $searchSubmit.width() / 2 + 'px',
|
||||
top: $searchSubmit.offset().top + $searchSubmit.height() / 2 + 'px'
|
||||
}, 1000, function () {
|
||||
$tips.html('<strong>怎么样，学会了吗？</strong>');
|
||||
$arrow.addClass('active');
|
||||
|
||||
stepTimeout = setTimeout(function () {
|
||||
window.location = 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURIComponent(query);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
}, 200);
|
||||
}, 500);
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/* 自己人，停下 */
|
||||
$stop.click(function() {
|
||||
clearTimeout(stepTimeout);
|
||||
clearInterval(typeInterval);
|
||||
$stop.hide();
|
||||
$arrow.stop().hide();
|
||||
$kw.val(query);
|
||||
query = false;
|
||||
$tips.html('输入一个问题，然后点击百度一下');
|
||||
});
|
||||
|
||||
/* 提交 */
|
||||
$('#search-form').submit(function() {
|
||||
if(!!query) return false;
|
||||
|
||||
var question = $.trim($kw.val());
|
||||
if(!question) {
|
||||
$kw.val('');
|
||||
$tips.html('<span style="color: red">搜了个寂寞？</span>');
|
||||
} else {
|
||||
$tips.html('↓↓↓ 复制下面的链接，教伸手党使用百度');
|
||||
|
||||
$('#output').fadeIn();
|
||||
$urlOutput.val(window.location.origin + window.location.pathname + '?q=' + Base64.encode(question)).focus().select();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
/* 复制结果 */
|
||||
var clipboard = new ClipboardJS('[data-clipboard-target]');
|
||||
clipboard.on('success', function(e) {
|
||||
$tips.html('<span style="color: #4caf50">复制成功！赶紧把链接甩给伸手党们！</span>');
|
||||
});
|
||||
clipboard.on('error', function(e) {
|
||||
$tips.html('<span style="color: red">复制失败，请手动复制...</span>');
|
||||
});
|
||||
|
||||
/* 预览 */
|
||||
$('#preview').click(function() {
|
||||
var link = $urlOutput.val();
|
||||
if (!!link) {
|
||||
window.open(link);
|
||||
}
|
||||
});
|
||||
});
|
||||
if(!window.location.origin){window.location.origin=window.location.protocol+"//"+window.location.hostname+(window.location.port?':'+window.location.port:'')}$.getUrlParam=function(name){var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");var r=window.location.search.substr(1).match(reg);if(r!==null)return unescape(r[2]);return null};$(function(){var $kw=$('#kw'),$searchSubmit=$('#search-submit'),$urlOutput=$('#url-output'),$tips=$('#tips'),$stop=$('#stop'),$arrow=$('#arrow'),$logo=$('img[src="img/baidu_logo.png"]');function isMobileDevice(){return $(window).width()<650}function setDeviceSpecificLogo(){if(isMobileDevice()){$logo.attr('src','img/2.png')}else{$logo.attr('src','img/1.png')}}setDeviceSpecificLogo();$(window).resize(function(){setDeviceSpecificLogo()});var stepTimeout,typeInterval;var query=$.getUrlParam('q');if(!!query){try{query=Base64.decode(query)}catch(e){console.log(e)}}if(!!query){$tips.html('让我来教你正确的打开方式');$stop.fadeIn();stepTimeout=setTimeout(function(){$tips.html('1、找到输入框并选中');$arrow.removeClass('active').show().animate({left:$kw.offset().left+20+'px',top:($kw.offset().top+$kw.outerHeight()/2)+'px'},2000,function(){$tips.html('2、输入你要找的内容');$arrow.addClass('active');stepTimeout=setTimeout(function(){$arrow.fadeOut();var i=0;typeInterval=setInterval(function(){$kw.val(query.substr(0,i));if(++i>query.length){clearInterval(typeInterval);$tips.html('3、点击下“百度一下”按钮');$arrow.removeClass('active').fadeIn().animate({left:$searchSubmit.offset().left+$searchSubmit.width()/2+'px',top:$searchSubmit.offset().top+$searchSubmit.height()/2+'px'},1000,function(){$tips.html('<strong>怎么样，学会了吗？</strong>');$arrow.addClass('active');stepTimeout=setTimeout(function(){window.location='https://www.baidu.com/s?ie=utf-8&wd='+encodeURIComponent(query)},1000)})}},200)},500)})},1000)}$('#search-form').submit(function(){if(!!query)return false;var question=$.trim($kw.val());if(!question){$tips.html('<span style="color: red">搜了个寂寞？</span>');$kw.val('')}else{$tips.html('↓↓↓ 复制下面的链接，教伸手党使用百度');$('#output').fadeIn();$urlOutput.val(window.location.origin+window.location.pathname+'?q='+Base64.encode(question)).focus().select()}return false});var clipboard=new ClipboardJS('[data-clipboard-target]');clipboard.on('success',function(e){$tips.html('<span style="color: #4caf50">复制成功！赶紧把链接甩给伸手党们！</span>')});clipboard.on('error',function(e){$tips.html('<span style="color: red">复制失败，请手动复制...</span>')});$('#preview').click(function(){var link=$urlOutput.val();if(!!link){window.open(link)}})});
|
||||
|
||||
Reference in New Issue
Block a user