二维码、平滑滚动、滚动侦测

75 阅读 0 评论 50 点赞

我是靠谱客的博主热情舞蹈，这篇文章主要介绍二维码、平滑滚动、滚动侦测，现在分享给大家，希望可以做个参考。

转载： ATFWUS
原文链接：https://blog.csdn.net/ATFWUS/article/details/106157480
0x06.二维码生成（qrcode.js）
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
具体前往：https://github.com/davidshimjs/qrcodejs

//生成二维码

复制代码

1
2
3
4
5
6
7
8
9
var qrcode=new QRCode("qrcode",{
    text: "http://blog.csdn.net/ATFWUS",
    width:128,
    height:128,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
})

0x07.平滑滚动（jquery.scrollTo）
能够使得定位的时候更有体验感。
具体前往：https://github.com/flesler/jquery.scrollTo

CDN:

复制代码

1
2
3
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>

0x08.滚动侦测（Waypoints）
能够侦测滚动时，现在正显示的内容，可以根据需要改变组件的显示与隐藏。
具体前往：http://imakewebthings.com/waypoints/

示范：
//控制工具组件的显示与隐藏，只有向下滑动时显示

复制代码

1
2
3
4
5
6
7
8
9
10
11
 var waypoint=new Waypoint({
        element: document.getElementById('waypoint'),
        handler:function (direction) {
            if(direction=='down'){
                $('#toolbar').show();
            }else{
                $('#toolbar').hide(500);
            }
        }
    })