Canvas绘制的进度环返回顶部功能

日志记录 0 评论 • 1365 阅读

前言

最近逛博客看到的返回顶部功能,是进度环样式的 感觉不错 这里分享一下,经过测试需要引入jquery,效果很好,建议收藏备用。

正文

1、需要在body里面添加如下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() > 100) {    
                    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="45" height="45"></canvas><div class="per"></div></div>');    
    var T = bigfa_scroll;    
    T.backToTop(jQuery("#backtoTop"));    
    T.scrollHook(jQuery(window), "#FF5E52");    
});  

2、所需要的CSS样式如下:

#backtoTop {  
    background-color:#eee;  
    border-radius:100%;  
    bottombottom:10%;  
    height:48px;  
    position:fixed;  
    rightright:-100px;  
    width:48px;  
    transition:0.5s;  
    -webkit-transition:0.5s  
}  
#backtoTop.button--show{  
    rightright: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;line-height: 0;}

3、效果图:
演示图

添加新评论
二维码
评论留言