网站首页 网页特效 动画特效 正文
简单实用的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代码中加入下面的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}完整的代码如下，请运行代码查看效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/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}
.yanss {margin:200px auto; width:300px; font-size:40px; color:red; font-weight: bold;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="height:1000px;">
<div class="yanss">请把网页轮动到底部查看右下角的效果</div>
<script type="text/javascript">
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");
});
</script>
</body>
</html>猜你喜欢
- 2018-08-10 美化大气实用多彩加载中canvas动画
- 2018-06-18 带文字简介链接按钮幻灯轮播图特效动画切换jQuery插件
- 2018-06-07 纯CSS3实现炫酷动画效果下拉导航菜单特效代码
- 2018-05-29 纯CSS3实现鼠标经过菜单按钮边线动画
- 2018-05-29 jQuery多种页面元素出入动画效果演示
- 2018-05-29 jQuery常用会员注册带表单验证功能插件
- 2018-05-29 原生js实现拖动排序图片相册特效代码
- 2018-05-29 jQuery全屏大图轮播带遮罩无缝滚动自动切换插件
- 2018-05-29 JS实现用回车键切换焦点
- 2018-05-28 CSS3汉堡包菜单图标按钮变形动画特效
欢迎 你 发表评论:
- 网站分类
- 标签列表
已有1位网友发表了看法：
从良未遂 评论于 [2020-10-14 08:38:32] 回复
大佬，帮忙看看，我都加进去了为什么没有效果啊 ？