first upload

2017-03-16 21:34:13 +08:00
parent becb99ef96
commit 11c9384fd4
6 changed files with 463 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@@ -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;
+    }
+}
--- a/get.php
+++ b/get.php
@@ -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);
+    }
+}
--- a/img/arrow.png
+++ b/img/arrow.png
--- a/img/baidu_logo.png
+++ b/img/baidu_logo.png
--- a/index.html
+++ b/index.html
@@ -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 &copy;&nbsp;<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>
--- a/js/lmbtfy.js
+++ b/js/lmbtfy.js
@@ -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); 
+}