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


热度:169° 评分:4.5
发布时间: 2018年1月9日

本文标签:

版权声明:若无特殊注明,本文皆为《邵先森》原创,转载请保留文章出处。

本文链接:简单实用的Canvas进度环返回按钮 - http://www.wuiso.top/post-918.html

发表评论

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

您好,您的域名未授权,即将跳转主页。。。

快捷导航 返回顶部