wordpress的Canvas实现进度环返回顶部按钮

一点优化 2019年12月29日21:09:25
评论
679看 2466字
广告也精彩
今天在一个网站上扒下了一个进度环返回顶部的按钮,感觉很有意思,比知更鸟自带的高大上的多,所以分享出来。

图片:

wordpress的Canvas实现进度环返回顶部按钮wordpress的Canvas实现进度环返回顶部按钮

1.js代码

将以下代码保存到jindu.php文件中,然后上传到主题的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), “#d57a21”);
});

2.调用js文件

在header.php中的<head></head>添加以下代码:

<script src=“<?php echo get_template_directory_uri(); ?>/js/jindu.js”></script>

3.添加样式

将以下代码添加到style.css中即可:

#backtoTop{background-color:#eee;border-radius:100%;bottombottom:10%;height:48px;position:fixed;rightright:-100px;width:48px;transition:.5s;-webkit-transition:.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:#000;cursor:pointer}.per:before{content:attr(data-percent)}.per:hover:before{content:“↑”;font-size:20px}

好了,大功告成,简单的教程相信大家都可以看懂吧~~

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
修改WordPress数据库前缀完后台无法登陆教程 WP综合教程

修改WordPress数据库前缀完后台无法登陆教程

一点优化操作完上一个如何修改WordPress数据库前缀修改完之后,发现网站后台无法登陆了,百思不得其姐,然后在百度的帮助下,解决了这个问题,后续的教程请看下面。 如果你将数据库导入到运营中的服务器登...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: