在杨小杰博客看到的
在以前某博客的某页面也见过类似效果
分享给大家
大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布,百分比数字是用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="b943-d9e4-28bc-6fb7 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'));的颜色参数即可,默认黑色。
如果修改点击图标就.per:hover里面的content内容。可以引入web图标
原文作者枫叶网
为表达对抗新冠状疫情战斗牺牲烈士和逝世同胞的深切哀悼 国务院公告2020年4月4日将举行全国性哀悼活动,网站建议大家修改成黑白色,给大家分享一段代码,直接放在网站的</head>...
利用JS简单快速批量取消微博的关注 微博关注的人太多了,一个一个取消很麻烦?那么这个方法很适合你,和全自动取关都差不多了,只适用于电脑用户! 步骤如下 1.电...
jquery-2.1.1 (注!jquery-2.0以上版本不再支持IE 6/7/8) 百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况)百度压缩版引用地址: <script src...
laysns资源网系统今日文章时间加红 只需要写一个判断,那如果今日未发文则显示昨日时间加红怎么实现呢? 首先laysns资源网系统新版增加了一个 $todayPublishNum 函...
手机端获取城市名称 百度地图接口 引入百度api<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"...
Emlog今日文章时间加红 只需要写一个判断,那如果今日未发文则显示昨日时间加红怎么实现呢? 首先我们需要判断一下今日是否发文 把代码放到模板下module.php中 &l...