简单实用的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    百度已收录
正文到此结束

点击下方支持本站

点击支持下贵站吧
点击支持下贵站吧

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

微笑可爱憨笑鼓掌白眼发呆撇嘴色得意吐抠鼻可怜呲牙惊讶冷汗流泪大哭发怒抚摸傲慢惊恐鄙视疑问奸笑抓狂偷笑流汗擦汗晕委屈吓衰糗大了威武给力牛逼

评论信息框

火箭正在发射中...

已有6条吐槽

帝都

2016-12-31 22:09 广东省惠州市电信
face 有点看不懂哦,希望下次写的简单易懂一点!
face 好羞射,文章真的好赞啊,顶博主!
 Windows 7 x64   Google Chrome 55.0.2883.87

胡德杰

2016-12-15 22:31 北京市朝阳区鹏博士长城宽带
为看图片而来,却发现没有,上当了!
 Windows 10 x64   Google Chrome 55.0.2883.87

痞子大神

2016-12-09 22:50 四川省德阳市罗江县电信
吐你一脸,吐槽ing
 Windows 10 x64   Google Chrome 45.0.2454.101

小陈

2016-12-10 17:40 湖南省张家界市电信
@痞子大神:face
 Windows 10 x64   Google Chrome 55.0.2883.75

割样机

2016-12-03 20:10 上海市闸北区电信
canvas学过一点,不过没怎么练过
 Windows 7 x64   Google Chrome 45.0.2454.101

代写essay

2016-12-03 00:37 罗马尼亚 CZ88.NET
很好的网站,赞赞
 Windows 10 x64   Firefox 40.0