简单实用的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   百度未收录

发表评论

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

评论

22条评论
  1. avatar

    xmin Lv.1    广东省深圳市 移动    回复

    ...试试

      1. 头像

        小陈    浙江省杭州市 阿里云BGP数据中心    回复

        回复了没想好:来者何人,报上名来。 表情

    1. avatar

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

      拿走了

      1. 头像

        小陈    湖南省张家界市 电信    回复

        回复了久伴:生命在于折腾不息。 表情

      2. 头像

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

        回复了小陈:网吧电信网,服务器终于链接上了,折腾哈子

    2. avatar

      花语 Lv.1    河南省平顶山市 联通    回复

      可以,不错呦

      1. 头像

        小陈    湖南省张家界市 电信    回复

        回复了花语:还凑合。

    3. avatar

      苏凉 Lv.3    黑龙江省牡丹江市 联通    回复

      支持一下

          1. avatar

            Lv.1    重庆市 电信    回复

            放在那里

            00:00 / 00:00
            顺序播放