我们一般在PC端在阅读诸如CSDN博客，如果想要在手机上阅读某一文章只需点击文章右侧的“阅读转移”即可弹出表示此页面链接的二维码，手机扫码即可阅读。本教程旨在迅速帮大家完成这一功能，实现效果如图所示：

第一步，将如下代码拷贝至sidebar.php(handsome/component下)文件最顶部。

<style>
    /* 工具栏 - start */
    .tools-item {
        position: fixed;
        bottom: 20px;
        right: 227px;
        width: 45px;
        height: 45px;
        text-align: center;
    }

    .tools-item > i {
        display: inline;
        line-height: 45px;
    }

    #qrcode-img {
        position: fixed;
        bottom: 70px;
        right: 260px;
        display: none;
        box-shadow: 0 0 20px #B6DFE9;
        padding:25px;
        background: #fff;
    }
</style>
<link rel="stylesheet" href="font-awesome.min.css" type="text/css"/> //font-awesome.min.css文件下方给出下载链接
<script type="text/javascript" src="qrcode.min.js"></script>//qrcode.min.js文件下方给出下载链接
<script type="text/javascript">
    $(function(){
        var system = { 
            win: false, 
            mac: false, 
            xll: false
        }; 
        //检测平台 
        var p = navigator.platform; 
        system.win = p.indexOf("Win") == 0; 
        system.mac = p.indexOf("Mac") == 0; 
        system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 
        if (system.win || system.mac || system.xll) { 
 
        } else {
            $("#qrcode").attr("hidden","hidden");
        } 

        var url = encodeURI(location.href);
        var select = true;
        $('#qrcode').click(function() {
            if(select) {
                $('#qrcode-img').empty();
                new QRCode(document.getElementById("qrcode-img"), {
                    text: url,
                    width: 180,
                    height: 180,
                    colorDark : "#000000",
                    colorLight : "#ffffff",
                    correctLevel : QRCode.CorrectLevel.L
                });
                $('#qrcode-img').fadeIn(500);
                select = false;
            } else {
                $('#qrcode-img').fadeOut(500);
                select = true;
            }
        });
    });
</script>

第二部，拷贝以下代码至第187行（在执行完第一步的前提下）：

<div id="qrcode" class="tools-item" title="阅读转移"><div id="qrcode-img"></div><i class="fa fa-mobile  fa-3x" aria-hidden="false"></i></div>

拷贝位置如下图所示：

版权属于：带翅膀的猫

本文链接：https://www.chengpengper.cn/archives/39/

转载时须注明出处及本声明