├── .gitattributes ├── .gitignore ├── LICENSE ├── css └── style.css ├── favicon.ico ├── img ├── arrow.png ├── baidu_logo.png └── hand.png ├── index.html └── js └── script.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 mengkun 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | html, body, 4 | div, section, header, footer, 5 | button, input, textarea, 6 | p, ul, li { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | font-family: Microsoft Yahei, "微软雅黑", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; 11 | } 12 | 13 | img { 14 | outline: none; 15 | } 16 | 17 | html, body { 18 | width: 100%; 19 | height: 100%; 20 | overflow-x: hidden; 21 | } 22 | 23 | 24 | /* 搜索框 */ 25 | #search { 26 | position: relative; 27 | height: 40%; 28 | min-height: 314px; 29 | max-height: 510px; 30 | margin: 0 auto; 31 | text-align: center; 32 | } 33 | 34 | #search-form { 35 | position: absolute; 36 | width: 100%; 37 | bottom: 0; 38 | } 39 | 40 | .search-form-group { 41 | position: relative; 42 | max-width: 655px; 43 | margin: 0 auto; 44 | } 45 | 46 | .search-form-input { 47 | position: absolute; 48 | left: 0; 49 | right: 108px; 50 | vertical-align: top; 51 | overflow: hidden; 52 | } 53 | 54 | .search-form-input input { 55 | width: 100%; 56 | height: 44px; 57 | padding: 12px 16px; 58 | font-size: 16px; 59 | outline: 0; 60 | box-shadow: none; 61 | border-radius: 10px 0 0 10px; 62 | border: 2px solid #c4c7ce; 63 | border-right: none; 64 | background: #fff; 65 | color: #222; 66 | } 67 | .search-form-group input:hover { 68 | border-color: #9195a3; 69 | } 70 | .search-form-group input:focus { 71 | border-color: #4e6ef2; 72 | } 73 | 74 | .search-form-group button { 75 | cursor: pointer; 76 | width: 108px; 77 | height: 44px; 78 | line-height: 45px; 79 | padding: 0; 80 | background: #4e6ef2; 81 | border-radius: 0 10px 10px 0; 82 | font-size: 17px; 83 | color: #fff; 84 | box-shadow: none; 85 | font-weight: 400; 86 | border: none; 87 | outline: 0; 88 | float: right; 89 | z-index: 1; 90 | } 91 | .search-form-group button:active { 92 | background-color: #4662d9; 93 | } 94 | .search-form-group button:hover { 95 | background-color: #4662d9; 96 | } 97 | 98 | .search-header { 99 | position: absolute; 100 | bottom: 60px; 101 | width: 100%; 102 | } 103 | 104 | .search-header h2 { 105 | font-size: 24px; 106 | font-weight: 900; 107 | } 108 | 109 | .search-header img { 110 | display: inline-block; 111 | width: 270px; 112 | margin: 0 -12px -16px; 113 | } 114 | 115 | /* 功能区 */ 116 | #function { 117 | position: absolute; 118 | width: 100%; 119 | min-height: 220px; 120 | text-align: center; 121 | margin-top: 80px; 122 | } 123 | 124 | #tips { 125 | color: #9195a3; 126 | font-size: 16px; 127 | } 128 | 129 | #stop { 130 | display: none; 131 | border: none; 132 | padding: 8px 15px; 133 | border-radius: 100px; 134 | color: #bababa; 135 | background: #f1f1f1; 136 | outline: none; 137 | cursor: pointer; 138 | margin-top: 50px; 139 | } 140 | 141 | #output { 142 | display: none; 143 | width: 100%; 144 | max-width: 400px; 145 | margin: 20px auto; 146 | } 147 | 148 | #output textarea { 149 | width: 100%; 150 | padding: 5px 8px; 151 | border-radius: 3px; 152 | border: 1px solid #c8c8c8; 153 | outline: none; 154 | } 155 | #output textarea:focus { 156 | border-color: #4285f4; 157 | box-shadow: 0 0 2px #4285f4; 158 | } 159 | 160 | #output .tool-btns { 161 | text-align: right; 162 | margin-top: 8px; 163 | } 164 | 165 | #output button { 166 | outline: none; 167 | cursor: pointer; 168 | color: #fff; 169 | background: #3f89ec; 170 | border: none; 171 | margin-left: 8px; 172 | padding: 6px 14px; 173 | border-radius: 3px; 174 | } 175 | #output button:hover { 176 | background: #4490f7; 177 | } 178 | #output button:focus { 179 | background: #3a84e8; 180 | } 181 | 182 | 183 | /* 页脚 */ 184 | #footer { 185 | width: 100%; 186 | position: fixed; 187 | z-index: 100; 188 | bottom: 0; 189 | left: 0; 190 | height: 40px; 191 | line-height: 40px; 192 | font-size: 12px; 193 | overflow: hidden; 194 | background-color: #fafafa; 195 | padding: 0 20px; 196 | } 197 | 198 | #footer li { 199 | list-style: none; 200 | display: inline-block; 201 | float: left; 202 | padding: 0 10px; 203 | } 204 | 205 | .footer-left, .footer-left a { 206 | color: #9195a3; 207 | text-decoration: none; 208 | } 209 | 210 | .footer-right { 211 | float: right; 212 | } 213 | .footer-right, .footer-right a { 214 | color: #bbb; 215 | } 216 | 217 | 218 | /* 鼠标指示箭头 */ 219 | #arrow { 220 | display: none; 221 | position: absolute; 222 | left: 0; 223 | top: 0; 224 | width: 50px; 225 | height: 50px; 226 | z-index: 999; 227 | background: url(../img/arrow.png) no-repeat; 228 | } 229 | 230 | #arrow::after { 231 | content: ''; 232 | position: absolute; 233 | top: -13px; 234 | left: -15px; 235 | z-index: -1; 236 | border-radius: 9em; 237 | box-shadow: 0 0 0 7px rgba(0,0,0,.4); 238 | width: 30px; 239 | height: 30px; 240 | opacity: 0; 241 | } 242 | 243 | #arrow.active::after { 244 | -webkit-animation: bubble-scale 1s ease; 245 | animation: bubble-scale 1s ease; 246 | } 247 | 248 | @-webkit-keyframes bubble-scale { 249 | from { 250 | transform: scale(0); 251 | opacity: 1 252 | } 253 | to { 254 | transform:scale(2); 255 | opacity: 0 256 | } 257 | } 258 | 259 | @keyframes bubble-scale { 260 | from { 261 | transform: scale(0); 262 | opacity: 1 263 | } 264 | to { 265 | transform: scale(2); 266 | opacity: 0 267 | } 268 | } 269 | 270 | 271 | 272 | /* 响应式优化 */ 273 | @media screen and (max-width: 650px) { 274 | #search { 275 | margin: 0 10px; 276 | height: auto; 277 | min-height: 200px; 278 | } 279 | 280 | .search-header img { 281 | width: 180px; 282 | margin: 0 -16px -12px; 283 | } 284 | 285 | #search-form { 286 | bottom: 10px; 287 | border: 1px solid #363636; 288 | } 289 | 290 | .search-form-input { 291 | right: 81px; 292 | } 293 | 294 | .search-form-input input { 295 | border: none; 296 | border-radius: 0; 297 | padding: 12px; 298 | } 299 | 300 | .search-form-group button { 301 | width: 81px; 302 | height: 44px; 303 | padding: 0 10px; 304 | border: none; 305 | border-left: 1px solid #e8e8e8; 306 | border-radius: 0; 307 | font-size: 16px; 308 | font-weight: 700; 309 | line-height: 46px; 310 | white-space: nowrap; 311 | letter-spacing: -1px; 312 | color: #38f; 313 | background: #fff; 314 | } 315 | 316 | .search-form-group button:active { 317 | background-color: #fdfafa; 318 | } 319 | .search-form-group button:hover { 320 | background-color: #fdfafa; 321 | } 322 | 323 | #function { 324 | position: relative; 325 | top: 0; 326 | margin-top: 50px; 327 | padding: 0 10px; 328 | } 329 | 330 | #stop { 331 | margin-top: 30px; 332 | } 333 | 334 | #footer { 335 | padding: 0; 336 | } 337 | 338 | #arrow { 339 | background: url(../img/hand.png) no-repeat; 340 | } 341 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/google/068f9d067a4e16fe68f425ead76070f6a3213d7a/favicon.ico -------------------------------------------------------------------------------- /img/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/google/068f9d067a4e16fe68f425ead76070f6a3213d7a/img/arrow.png -------------------------------------------------------------------------------- /img/baidu_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/google/068f9d067a4e16fe68f425ead76070f6a3213d7a/img/baidu_logo.png -------------------------------------------------------------------------------- /img/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuxizhe/google/068f9d067a4e16fe68f425ead76070f6a3213d7a/img/hand.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 让我帮你google一下 | Let Me google For You 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 28 | 29 | 30 | 31 | 49 | 50 |
51 |

输入一个问题，然后点击google一下

52 | 53 | 54 | 55 |
56 | 57 |
58 | 59 | 60 |
61 |
62 |
63 | 64 | 70 | 71 |
72 | 73 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 让我帮你百度一下【重制版】 3 | * GitHub 开源地址：https://github.com/mengkunsoft/lmbtfy 4 | ** 5 | * 原始版本来自 bangbang(http://lmbtfy.cn/)，mengkun(https://mkblog.cn) 在原作的基础上进行了重制，风格变更为新版百度 UI，并适配了移动端 6 | * 交互效果参考了 不会百度么？(http://buhuibaidu.me/) 7 | ** 8 | * 转载或使用时，还请保留以上信息，谢谢！ 9 | */ 10 | 11 | /* 低版本 IE polyfill */ 12 | if (!window.location.origin) { 13 | window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : ''); 14 | } 15 | 16 | /* 扩展一个getUrlParam的方法 */ 17 | $.getUrlParam = function (name) { 18 | var query = window.location.search.substring(1); 19 | var vars = query.split("&"); 20 | for (var i = 0; i < vars.length; i++) { 21 | var pair = vars[i].split("="); 22 | if (pair[0] == name) { return pair[1]; } 23 | } 24 | return (false); 25 | }; 26 | 27 | $(function () { 28 | var $kw = $('#kw'), 29 | $searchSubmit = $('#search-submit'); 30 | $urlOutput = $('#url-output'), 31 | $tips = $('#tips'), 32 | $stop = $('#stop'), 33 | $arrow = $('#arrow'); 34 | 35 | var stepTimeout, typeInterval; 36 | 37 | /* 获取并解析查询参数 */ 38 | var query = $.getUrlParam('q'); 39 | if (!!query) { 40 | try { 41 | query = decodeURIComponent(query); 42 | } catch (e) { 43 | console.log(e); 44 | } 45 | } 46 | 47 | /* 有参数，启动百度教程 */ 48 | if (!!query) { 49 | $tips.html('让我来教你正确的打开方式'); 50 | $stop.fadeIn(); 51 | 52 | stepTimeout = setTimeout(function () { 53 | $tips.html('1、找到输入框并选中'); 54 | 55 | $arrow.removeClass('active').show().animate({ 56 | left: $kw.offset().left + 20 + 'px', 57 | top: ($kw.offset().top + $kw.outerHeight() / 2) + 'px' 58 | }, 2000, function () { 59 | $tips.html('2、输入你要找的内容'); 60 | $arrow.addClass('active'); 61 | 62 | stepTimeout = setTimeout(function () { 63 | $arrow.fadeOut(); 64 | 65 | var i = 0; 66 | typeInterval = setInterval(function () { 67 | $kw.val(query.substr(0, i)); 68 | if (++i > query.length) { 69 | clearInterval(typeInterval); 70 | $tips.html('3、点击下“google一下”按钮'); 71 | 72 | $arrow.removeClass('active').fadeIn().animate({ 73 | left: $searchSubmit.offset().left + $searchSubmit.width() / 2 + 'px', 74 | top: $searchSubmit.offset().top + $searchSubmit.height() / 2 + 'px' 75 | }, 1000, function () { 76 | $tips.html('怎么样，学会了吗？'); 77 | $arrow.addClass('active'); 78 | 79 | stepTimeout = setTimeout(function () { 80 | window.location = 'https://g.dappwind.com/search?q=' + encodeURIComponent(query); 81 | }, 1000); 82 | }); 83 | } 84 | }, 200); 85 | }, 500); 86 | }); 87 | }, 1000); 88 | } 89 | 90 | /* 自己人，停下 */ 91 | $stop.click(function () { 92 | clearTimeout(stepTimeout); 93 | clearInterval(typeInterval); 94 | $stop.hide(); 95 | $arrow.stop().hide(); 96 | $kw.val(query); 97 | query = false; 98 | $tips.html('输入一个问题，然后点击google一下'); 99 | }); 100 | 101 | /* 提交 */ 102 | $('#search-form').submit(function () { 103 | if (!!query) return false; 104 | 105 | var question = $.trim($kw.val()); 106 | if (!question) { 107 | $tips.html('搜了个寂寞？'); 108 | $kw.val(''); 109 | } else { 110 | $tips.html('↓↓↓ 复制下面的链接，教伸手党使用google'); 111 | $('#output').fadeIn(); 112 | $urlOutput.val(window.location.origin + window.location.pathname + '?q=' + encodeURIComponent(question)).focus().select(); 113 | } 114 | return false; 115 | }); 116 | 117 | /* 复制结果 */ 118 | var clipboard = new ClipboardJS('[data-clipboard-target]'); 119 | clipboard.on('success', function (e) { 120 | $tips.html('复制成功！赶紧把链接甩给伸手党们！'); 121 | }); 122 | clipboard.on('error', function (e) { 123 | $tips.html('复制失败，请手动复制...'); 124 | }); 125 | 126 | /* 预览 */ 127 | $('#preview').click(function () { 128 | var link = $urlOutput.val(); 129 | if (!!link) { 130 | window.open(link); 131 | } 132 | }); 133 | }); --------------------------------------------------------------------------------