专栏首页Youngxj简单实用的Canvas进度环返回按钮

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

具体效果当页面向下滑动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'));的颜色参数即可,默认黑色。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • tooltip(title美化)教程——jquery的特效

    Youngxj
  • emlog侧边栏添加百度一下

    Youngxj
  • 给网站添加好看的底部功能按钮

    Youngxj
  • js数据类型很简单,却也不简单

    javascript的数据类型分为两大类,一类是原始类型(primitive type),一类是对象类型(object type)。

    Tusi
  • React List Diff

    对treeA做以上3步,就能得到treeA',树的规模较小时,一眼就能看出来,回想下是怎么做到的:

    ayqy贾杰
  • cordova插件-File Transfer

    添加插件 $ cordova plugin addcordova-plugin-file-transfer ? 图 15如上则插入成功 插件的使用 Meth...

    roc
  • ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能

    ZeroClipboard实现多个浏览器兼容的复制文本到剪贴板的功能 本人在项目中使用的js版本。为了方便大家下载。直接粘贴代码给大家看。版本是1.2.0 /*...

    小帅丶
  • 从Baa开发中总结Go语言性能渐进优化

    在Go生态已经有很多WEB框架,但感觉没有一个符合我们的想法,我们想要一个简洁高效的核心框架,提供路由,context,中间件和依赖注入,而且拒绝使用正则和反射...

    李海彬
  • Dart的基础语法与类型变量

    在Dart中,我们可以用var或者具体的类型来声明一个变量。当使用var定义变量时,表示类型是由编译器推断决定的,当然你也可以用静态类型去定义变量,更清楚地跟编...

    拉维
  • AS3资源加载器

    最近鼓捣除了一个加载器。可以分布式地加载文本文件以及SWF文件。本人将它写成了一个Flex库。本着共同进步的目的,我将其分享出来。

    py3study

扫码关注云+社区

领取腾讯云代金券