first upload
This commit is contained in:
mengkunsoft
251
css/style.css
Normal file
251
css/style.css
Normal file
@@ -0,0 +1,251 @@
|
|||||||
|
*{
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*关于 按钮*/
|
||||||
|
.about{
|
||||||
|
position: absolute;
|
||||||
|
top: 1em;
|
||||||
|
right: 1em;
|
||||||
|
height: 1.5em;
|
||||||
|
line-height: 1.5em;
|
||||||
|
width: 1.5em;
|
||||||
|
border-radius: .75em;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
background-color: rgba(0,0,0,.05);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*弹窗层*/
|
||||||
|
|
||||||
|
.pop-box {
|
||||||
|
z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
|
||||||
|
margin-bottom: 2px;
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
background: #FFF;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.pop-box .caption{
|
||||||
|
font-size: 23px;
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
border-left: 4px solid #563d7c;
|
||||||
|
margin: 10px 0 10px 5px;
|
||||||
|
background: #eee;
|
||||||
|
padding: 3px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
.pop-box .thanks{
|
||||||
|
/*text-indent: 30px;*/
|
||||||
|
padding: 0 10px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 25px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
.pop-box .copyBaidu{
|
||||||
|
font-size: 12px;
|
||||||
|
/*text-indent: 30px;*/
|
||||||
|
padding: 0 10px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 18px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.pop-box .thanks a{
|
||||||
|
margin: 0 2px;
|
||||||
|
color: #666;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.pop-box .thanks a:hover{
|
||||||
|
margin: 0 2px;
|
||||||
|
color: #666;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop-box .readit{ /* “我知道了” */
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.5s ease;
|
||||||
|
-webkit-transition: all 0.5s ease;
|
||||||
|
-moz-transition: all 0.5s ease;
|
||||||
|
-o-transition: all 0.5s ease;
|
||||||
|
-ms-transition: all 0.5s ease;
|
||||||
|
}
|
||||||
|
.pop-box .readit:hover{ /* “我知道了” */
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask { /*遮罩层*/
|
||||||
|
color:#C7EDCC;
|
||||||
|
background-color:#000;
|
||||||
|
position:absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0.59;
|
||||||
|
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 59);
|
||||||
|
filter: alpha(opacity = 59);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*页面主体部分*/
|
||||||
|
.container{
|
||||||
|
height: 500px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
#kw {
|
||||||
|
width: 521px;
|
||||||
|
height: 20px;
|
||||||
|
padding: 9px 7px;
|
||||||
|
font: 16px arial;
|
||||||
|
border: 1px solid #d8d8d8;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
vertical-align: top;
|
||||||
|
outline: none;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
#kw:focus{
|
||||||
|
border-top: 1px solid #38f !important;
|
||||||
|
border-left: 1px solid #38f !important;
|
||||||
|
border-bottom: 1px solid #38f !important;
|
||||||
|
}
|
||||||
|
/*百度一下*/
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 102px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: #38f;
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
.logo {
|
||||||
|
height: 100px;
|
||||||
|
margin-bottom: -20px;
|
||||||
|
}
|
||||||
|
#instructions { /*提示语*/
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 40px;
|
||||||
|
padding: 30px 2px;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.link {
|
||||||
|
/*margin-top: 100px;*/
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
a.link_button {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 38px;
|
||||||
|
margin: 0 10px;
|
||||||
|
background-color: #38f;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/*链接框*/
|
||||||
|
.copyable{
|
||||||
|
width: 300px;
|
||||||
|
height: 30px;
|
||||||
|
font-size: 25px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
#arrow{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
color: gray;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
footer a{
|
||||||
|
color: gray;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 666px) { /*针对小屏幕的优化*/
|
||||||
|
|
||||||
|
.title{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-top: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 50px;
|
||||||
|
margin-bottom: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-box{
|
||||||
|
padding-top: 10px;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kw {
|
||||||
|
height: 20px;
|
||||||
|
font: 16px arial;
|
||||||
|
border: 1px solid #d8d8d8;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
vertical-align: top;
|
||||||
|
outline: none;
|
||||||
|
|
||||||
|
float:left;
|
||||||
|
width: 95%;
|
||||||
|
margin-right: -200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*百度一下*/
|
||||||
|
.btn {
|
||||||
|
height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background-color: #38f;
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
margin-left: -10px;
|
||||||
|
float: right;
|
||||||
|
width: 100px;
|
||||||
|
z-index: 999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link{
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.link_button {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100px;
|
||||||
|
height: 35px;
|
||||||
|
line-height: 38px;
|
||||||
|
margin: 0 10px;
|
||||||
|
background-color: #38f;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
/*链接框*/
|
||||||
|
.copyable{
|
||||||
|
width: 80%;
|
||||||
|
height: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
51
get.php
Normal file
51
get.php
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<?php
|
||||||
|
// 新浪短网址api
|
||||||
|
// 编写：mengkun(http://mkblog.cn)
|
||||||
|
|
||||||
|
echoJson(shortUrl(getParam('longUrl','http://lab.mkblog.cn/lmbtfy/')));
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 短网址函数
|
||||||
|
* @param $longUrl 原始网址
|
||||||
|
* @return 缩短后的网址
|
||||||
|
*/
|
||||||
|
function shortUrl($longUrl) {
|
||||||
|
$url = "http://api.weibo.com/2/short_url/shorten.json?source=2849184197&url_long=" . urlencode($longUrl);
|
||||||
|
$ch = curl_init($url); //初始化
|
||||||
|
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // curl请求有返回的值
|
||||||
|
curl_setopt($ch, CURLOPT_HEADER, 0);
|
||||||
|
curl_setopt($ch, CURLOPT_ENCODING, "");
|
||||||
|
$output = curl_exec($ch); //执行并获取HTML文档内容
|
||||||
|
curl_close($ch); //释放curl句柄
|
||||||
|
// $obj = json_decode($output);
|
||||||
|
// $output = isset($obj->urls[0]->url_short)? $obj->urls[0]->url_short: ''; // 取出短网址的值
|
||||||
|
return $output;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取GET或POST过来的参数
|
||||||
|
* @param $key 键值
|
||||||
|
* @param $default 默认值
|
||||||
|
* @return 获取到的内容（没有则为默认值）
|
||||||
|
*/
|
||||||
|
function getParam($key,$default='')
|
||||||
|
{
|
||||||
|
return trim($key && is_string($key) ? (isset($_POST[$key]) ? $_POST[$key] : (isset($_GET[$key]) ? $_GET[$key] : $default)) : $default);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 输出返回结果，支持输出 json和jsonp 格式
|
||||||
|
* @param $data 输出的内容(json格式)
|
||||||
|
*/
|
||||||
|
function echoJson($data) //json和jsonp通用
|
||||||
|
{
|
||||||
|
$callback = getParam('callback');
|
||||||
|
if($callback != '') //输出jsonp格式
|
||||||
|
{
|
||||||
|
die($callback.'('.$data.')');
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
die($data);
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
img/arrow.png
Normal file
BIN
img/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 745 B |
BIN
img/baidu_logo.png
Normal file
BIN
img/baidu_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
57
index.html
Normal file
57
index.html
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head lang="cn">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>让我帮你百度一下|Let Me Baidu That For You</title>
|
||||||
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<img src="img/arrow.png" id="arrow">
|
||||||
|
<div class="about" title="点我点我！" onclick="showAbout()">?</div>
|
||||||
|
<div id="msgbox" class="pop-box">
|
||||||
|
<span class="caption"> 专治各种伸手党</span>
|
||||||
|
<div class="thanks">
|
||||||
|
创意及代码来自<a href="http://lmbtfy.cn/" target="_blank">lmbtfy.cn</a>
|
||||||
|
以及<a href="http://lmbtfy.retaker.me/" target="_blank">lmbtfy.retaker.me</a>，孟坤网页实验室完善了其前端界面。
|
||||||
|
</div>
|
||||||
|
<div class="thanks copyBaidu">
|
||||||
|
*本站与百度公司没有任何联系，baidu以及本站出现的百度公司Logo是百度公司的商标。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="readit" onclick="hideAbout();">我知道了</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div id="mask" class="mask"></div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div>
|
||||||
|
<h1 class="title">需要我帮你<img src="img/baidu_logo.png" class="logo">么</h1>
|
||||||
|
<span class="search-box">
|
||||||
|
<input type="text" class="search-text" id="kw">
|
||||||
|
<button class="btn" id="search">百度一下</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div id="instructions">
|
||||||
|
输入一个问题，然后按百度一下
|
||||||
|
</div>
|
||||||
|
<div class="link" style="display: none" id="link">
|
||||||
|
<input type="text" readonly id="lmbtfyLink" class="copyable">
|
||||||
|
<div>
|
||||||
|
<a class="link_button" href="javascript:void(0);" id="copy" data-clipboard-target="lmbtfyLink">复制</a>
|
||||||
|
<a class="link_button" href="javascript:void(0);" id="go" target="_blank">预览</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
Copyright © <a href="http://mkblog.cn" target="_blank">mkblog.cn</a>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
<script src="//cdnjscn.b0.upaiyun.com/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
|
||||||
|
<script src="//cdnjscn.b0.upaiyun.com/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
<script src="js/lmbtfy.js"></script>
|
||||||
|
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1257545628'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1257545628%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
104
js/lmbtfy.js
Normal file
104
js/lmbtfy.js
Normal file
@@ -0,0 +1,104 @@
|
|||||||
|
/**
|
||||||
|
* Created by bangbang on 14/10/10.
|
||||||
|
* Revised by mengkun on 17/03/16
|
||||||
|
*/
|
||||||
|
|
||||||
|
function urlEncode(String) {
|
||||||
|
return encodeURIComponent(String).replace(/'/g,"%27").replace(/"/g,"%22");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(document).ready(function (){
|
||||||
|
ZeroClipboard.config({swfPath: '//cdnjscn.b0.upaiyun.com/libs/zeroclipboard/2.1.6/ZeroClipboard.swf'});
|
||||||
|
var clip = new ZeroClipboard($('#copy'));
|
||||||
|
$('#search').on('click', function (){
|
||||||
|
var link = window.location.origin + window.location.pathname + '?' + urlEncode($('#kw').val());
|
||||||
|
$.ajax({
|
||||||
|
url: 'get.php?longUrl='+link,
|
||||||
|
type: "GET",
|
||||||
|
dataType: "jsonp", //使用JSONP方法进行AJAX
|
||||||
|
cache: false,
|
||||||
|
success: function (data) {
|
||||||
|
if (data){
|
||||||
|
if(!(typeof data.urls === undefined || typeof data.urls == "undefined")) //防止短网址失败
|
||||||
|
{
|
||||||
|
link = data.urls[0].url_short;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$('#go').attr("href",link);
|
||||||
|
$('#link').show();
|
||||||
|
$('#instructions').text('复制下面的地址,然后发给伸手党吧！');
|
||||||
|
$('#lmbtfyLink').val(link).focus().select();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
var $container = $('.container');
|
||||||
|
$container.on('click', '#go', function (){ //点击预览
|
||||||
|
var link = $('#lmbtfyLink').val();
|
||||||
|
if (!!link){
|
||||||
|
//window.open(link); //新窗口打开
|
||||||
|
//window.location = link;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var $kw = $('#kw');
|
||||||
|
$kw.on('keydown', function (e) {
|
||||||
|
if (e.keyCode == 13){
|
||||||
|
$('#search').trigger('click');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!!window.location.search){
|
||||||
|
var kw = decodeURIComponent(window.location.search.substr(1));
|
||||||
|
var $instructions = $('#instructions');
|
||||||
|
var $arrow = $('#arrow');
|
||||||
|
setTimeout(function (){
|
||||||
|
$instructions.text('1、找到输入框并选中');
|
||||||
|
$arrow.show().animate({
|
||||||
|
left: $kw.offset().left + 10 + 'px',
|
||||||
|
top: ($kw.offset().top + $kw.height()/2) + 'px'
|
||||||
|
}, 2000, function (){
|
||||||
|
$instructions.text('2、输入你的问题');
|
||||||
|
$arrow.hide();
|
||||||
|
var $kw = $('#kw');
|
||||||
|
$kw.focus();
|
||||||
|
var i = 0;
|
||||||
|
var interval = setInterval(function (){
|
||||||
|
$kw.val(kw.substr(0,i));
|
||||||
|
i++;
|
||||||
|
if (i > kw.length){
|
||||||
|
clearInterval(interval);
|
||||||
|
$instructions.text('3、按下“百度一下”按钮');
|
||||||
|
$arrow.show();
|
||||||
|
var $search = $('#search');
|
||||||
|
$arrow.animate({
|
||||||
|
left: $search.offset().left + $search.width()/2 + 'px',
|
||||||
|
top: $search.offset().top + $search.height()/2 + 'px'
|
||||||
|
}, 1000, function () {
|
||||||
|
$instructions.html('<strong>这对你而言就是这么困难么？</strong>');
|
||||||
|
setTimeout(function (){
|
||||||
|
window.location = 'http://www.baidu.com/s?ch=3&ie=utf-8&wd=' + encodeURIComponent(kw);
|
||||||
|
}, 2000);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function showAbout() //弹出消息
|
||||||
|
{
|
||||||
|
var windowWidth = $(window).width();
|
||||||
|
var windowHeight = $(window).height();
|
||||||
|
|
||||||
|
var popupHeight = $("#msgbox").height();
|
||||||
|
var popupWidth = $("#msgbox").width();
|
||||||
|
//添加并显示遮罩层
|
||||||
|
$("#mask").width(windowWidth).height(windowHeight).click(function() {hideAbout(); }).fadeIn(200);
|
||||||
|
$("#msgbox").css({"position": "absolute","left":windowWidth/2-popupWidth/2,"top":windowHeight/2-popupHeight/2}).fadeIn(200);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideAbout() //隐藏弹出的提示框
|
||||||
|
{
|
||||||
|
$("#mask").fadeOut(200);
|
||||||
|
$("#msgbox").fadeOut(200);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user