简单实用的Canvas进度环返回按钮

  • 内容
  • 相关

GIFbacktotop.gif

具体效果当页面向下滑动15%的时候回在页面的右下角出现这个按钮,并且具有Canvas绘制进度环的效果。

大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布,百分比数字是用data储存并使用css的 content属性实现。

Canvas进度环返回按钮实现方法

确保引入了jquery,下面的代码加入到你的js文件中

var bigfa_scroll = {
    drawCircle: function(id, percentage, color) {
        var width = jQuery(id).width();
        var height = jQuery(id).height();
        var radius = parseInt(width / 2.20);
        var position = width;
        var positionBy2 = position / 2;
        var bg = jQuery(id)[0];
        id = id.split("#");
        var ctx = bg.getContext("2d");
        var imd = null;
        var circ = Math.PI * 2;
        var quart = Math.PI / 2;
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        ctx.strokeStyle = color;
        ctx.lineCap = "square";
        ctx.closePath();
        ctx.fill();
        ctx.lineWidth = 3;
        imd = ctx.getImageData(0, 0, position, position);
        var draw = function(current, ctxPass) {
            ctxPass.putImageData(imd, 0, 0);
            ctxPass.beginPath();
            ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
            ctxPass.stroke();
        }
        draw(percentage / 100, ctx);
    },
    backToTop: function($this) {
        $this.click(function() {
            jQuery("body,html").animate({
                scrollTop: 0
            },
            800);
            return false;
        });
    },
    scrollHook: function($this, color) {
        color = color ? color: "#000000";
        $this.scroll(function() {
            var docHeight = (jQuery(document).height() - jQuery(window).height()),
            $windowObj = $this,
            $per = jQuery(".per"),
            percentage = 0;
            defaultScroll = $windowObj.scrollTop();
            percentage = parseInt((defaultScroll / docHeight) * 100);
            var backToTop = jQuery("#backtoTop");
            if (backToTop.length > 0) {
                if ($windowObj.scrollTop() > 200) {
                    backToTop.addClass("button--show");
                } else {
                    backToTop.removeClass("button--show");
                }
                $per.attr("data-percent", percentage);
                bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
            }
 
        });
    }
}
 
jQuery(document).ready(function() {
    jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
    var T = bigfa_scroll;
    T.backToTop(jQuery("#backtoTop"));
    T.scrollHook(jQuery(window), "#cc0000");
});

参考css代码:

管理员设置 回复 可见隐藏内容

修改进度环颜色,则修改 T.scrollHook(jQuery(window,'#000000')); 的颜色参数即可,默认黑色。

简单实用的Canvas进度环返回按钮
         本页正文内容约2339个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/302.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

58条评论
  1. avatar

    小世界 Lv.2 Chrome 53.0.2785.104 Chrome 53.0.2785.104 Windows Windows 回复

    表情 写得好好哟,我要给你生猴子!
    表情 骚年,我怀疑你写了一篇假的文章!

    河南省商丘市 联通

    1. avatar

      三七 Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      学习下

      河南省郑州市 移动

      1. avatar

        Lv.1 Chrome 55.0.2883.87 Chrome 55.0.2883.87 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        厉害!!!

        广东省汕头市 电信

        1. avatar

          风雨 Lv.3 QQbrowser QQbrowser Android 8.0.0 Android 8.0.0 回复

          你奶奶

          黑龙江省牡丹江市 联通

          1. avatar

            邵先森博客 Lv.3 Chrome 38.0.2125.102 Chrome 38.0.2125.102 Android 5.1 Android 5.1 回复

            怎么引用呢

            山东省济南市 移动

            1. avatar

              浮华Sir Lv.1 Chrome 38.0.2125.102 Chrome 38.0.2125.102 Android 5.0 Android 5.0 回复

              支持,小白路过

              贵州省黔南州都匀市 电信

              1. avatar

                学习 Lv.1 Chrome 56.0.2924.87 Chrome 56.0.2924.87 Windows 8.1 Windows 8.1 回复

                学习中

                广东省深圳市 电信

                1. avatar

                  Lv.1 Chrome 56.0.2924.87 Chrome 56.0.2924.87 Windows 8.1 Windows 8.1 回复

                  学习

                  广东省深圳市 电信

                  00:00 / 00:00
                  顺序播放