当前位置:首页 > 人生常识 > 正文内容

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

彭淇4年前 (2017-09-22)人生常识4235

简单实用的Canvas进度环返回按钮  js 视觉差 时间 加载 第1张


具体效果当页面向下滑动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代码可以参考:

#backtoTop{background-color:#eee;border-radius:100%;bottom:10%;height:48px;position:fixed;right:-100px;width:48px;transition:0.5s;-webkit-transition:0.5s}
#backtoTop.button--show{right:10px}
.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#555;cursor:pointer}
.per:before{content:attr(data-percent)}
.per:hover:before{content:"↑";font-size:20px}

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



扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

本文链接:https://www.pengqi.club/blog/127.html

相关文章

小腿抽筋是怎么回事?教你三招快速缓解!

小腿抽筋是怎么回事?教你三招快速缓解!

相信大部分人都经历过腿抽筋的痛苦,虽然说腿抽筋每次只是短短的数分钟,但是频繁的抽筋实在令人烦恼!那么腿抽筋到底是什么引起的呢?那怎样才能缓解呢?什么是腿抽筋?抽筋的学名叫肌肉痉挛,是一种肌肉自发的强直...

如何为你的网站添加ICON小图标?

如何为你的网站添加ICON小图标?

可能有很多朋友不知道什么是网站ICON小图标,其实网站ICON小图标就是显示在标题前面的小图标。比如飞翔勿扰博客上面标题前面的这个图标就是ICON图标。不明白的朋友可以看图。...

网站图片的简单优化

网站图片的简单优化

网站图片的简单优化 图文并茂是当前网站内容建设的主流和趋势,如果一个网页上,如果都是图片,或者都是文字,从阅读体验度上来说都不太好。可是通常而言,网站上的图片并不能够很好的收录,从目前来看,...

Sublime Text 3.0 全新UI主题,新 Logo 和诸多新鲜特性 + 注册码

Sublime Text 3.0 全新UI主题,新 Logo 和诸多新鲜特性 + 注册码

Sublime Text 是一个代码编辑器。 Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Subl...

小测试看你是否是过劳死的高发人群

小测试看你是否是过劳死的高发人群。所谓“过劳死“是指劳动者由于工作、生活规律遭到破坏,疲劳过度、压力过大,将突然引发身体潜在的疾病急性恶化,救治不及时而危及生命。目前,“过劳死“已越来越多地影响...

全平台通用评论神器一键自动填写昵称、邮箱和网址

全平台通用评论神器一键自动填写昵称、邮箱和网址

我们在访问网站时,看到一篇文章,想发表评论时,是否经常要在评论框里手动填写自己的昵称、E-mail 和网址等留言评论信息?重复的打字会让我们感到很乏味。为了解决这个问题,我在网上搜索相关资料,找到了很...

评论列表

彭淇
4年前 (2017-10-04)

[code][S8]有点看不懂哦,希望下次写的简单易懂一点![/code]

彭淇
4年前 (2017-09-28)

[code][S19]好羞射,文章真的好赞啊,顶博主![/code]

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。