简单实用的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')); 的颜色参数即可,默认黑色。


点赞
X
赞助一下:
    支付宝    微信    QQ红包

打开支付宝扫一扫
简单实用的Canvas进度环返回按钮
         本页正文内容约2339个文字
         本文标签:

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

46条评论
  1. avatar

    清风 Lv.3    湖南省娄底市 电信    回复

    支持

        1. avatar

          挺好 Lv.2    四川省德阳市 移动    回复

          表情 写得好好哟,文章大气磅礴,高山流水,有古人之风!

          1. avatar

            啊哈 Lv.2    四川省德阳市 移动    回复

            表情 写得好好哟,文章大气磅礴,高山流水,有古人之风!

              1. avatar

                风颜 Lv.3    安徽省铜陵市 电信    回复

                嗯嗯嗯嗯嗯嗯嗯嗯嗯