简单实用的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进度环返回按钮
本文标签:
版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。
本文链接:http://suppore.cn/302.html   百度未收录

发表评论

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

评论

31条评论
  1. avatar

    los大 Lv.1    河南省平顶山市新华区 联通    回复

    zzz查查

    1. avatar

      los夫 Lv.1    河南省平顶山市新华区 联通    回复

      表情 骚年,我怀疑你写了一篇假的文章!

      1. 头像

        小陈    湖南省衡阳市 电信    回复

        回复了los夫:表情

    2. avatar

      久伴 Lv.4    湖北省武汉市 电信    回复

      签到成功!签到时间: 上午10时29分1秒,签到运到,生活乐逍遥!

      1. avatar

        小八博客 Lv.2    内蒙古呼和浩特市 中国电信云计算中心    回复

        表情 写得好好哟,我要给你生猴子!

          1. avatar

            拉拉 Lv.1    北美地区    回复

            试试看

            1. avatar

              皮皮虾 Lv.1    广东省广州市 电信    回复

              要评论几次才给看?

              1. avatar

                皮皮虾 Lv.1    广东省广州市 电信    回复

                皮皮虾一起走

                00:00 / 00:00
                顺序播放