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

本文预计阅读时间 9 分钟
七墨今天在一个网站上扒下了一个进度环返回顶部的按钮,感觉很有意思,比知更鸟自带的高大上的多,所以分享出来。

图片:

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

1.js代码

将以下代码保存到jindu.php文件中,然后上传到主题的js文件夹中:

  1. var bigfa_scroll = {
  2.     drawCircle: function(id, percentage, color) {
  3.         var width = jQuery(id).width();
  4.         var height = jQuery(id).height();
  5.         var radius = parseInt(width / 2.20);
  6.         var position = width;
  7.         var positionBy2 = position / 2;
  8.         var bg = jQuery(id)[0];
  9.         id = id.split("#");
  10.         var ctx = bg.getContext("2d");
  11.         var imd = null;
  12.         var circ = Math.PI * 2;
  13.         var quart = Math.PI / 2;
  14.         ctx.clearRect(0, 0, width, height);
  15.         ctx.beginPath();
  16.         ctx.strokeStyle = color;
  17.         ctx.lineCap = "square";
  18.         ctx.closePath();
  19.         ctx.fill();
  20.         ctx.lineWidth = 3;
  21.         imd = ctx.getImageData(0, 0, position, position);
  22.         var draw = function(current, ctxPass) {
  23.             ctxPass.putImageData(imd, 0, 0);
  24.             ctxPass.beginPath();
  25.             ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false);
  26.             ctxPass.stroke();
  27.         }
  28.         draw(percentage / 100, ctx);
  29.     },
  30.     backToTop: function($this) {
  31.         $this.click(function() {
  32.             jQuery("body,html").animate({
  33.                 scrollTop: 0
  34.             },
  35.             800);
  36.             return false;
  37.         });
  38.     },
  39.     scrollHook: function($this, color) {
  40.         color = color ? color: "#000000";
  41.         $this.scroll(function() {
  42.             var docHeight = (jQuery(document).height() - jQuery(window).height()),
  43.             $windowObj = $this,
  44.             $per = jQuery(".per"),
  45.             percentage = 0;
  46.             defaultScroll = $windowObj.scrollTop();
  47.             percentage = parseInt((defaultScroll / docHeight) * 100);
  48.             var backToTop = jQuery("#backtoTop");
  49.             if (backToTop.length > 0) {
  50.                 if ($windowObj.scrollTop() > 200) {
  51.                     backToTop.addClass("button--show");
  52.                 } else {
  53.                     backToTop.removeClass("button--show");
  54.                 }
  55.                 $per.attr("data-percent", percentage);
  56.                 bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color);
  57.             }
  58.         });
  59.     }
  60. }
  61. jQuery(document).ready(function() {
  62.     jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>');
  63.     var T = bigfa_scroll;
  64.     T.backToTop(jQuery("#backtoTop"));
  65.     T.scrollHook(jQuery(window), "#d57a21");
  66. });

2.调用js文件

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

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

3.添加样式

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

  1. #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}

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

  • 七墨微信
  • 请留下您宝贵的意见,或者每天来本站的文章页面签到,七墨将不胜感激~~
  • weinxin
  • 七墨分享群
  • 要加群的先看本站第一篇文章,不懂的不要加,谢谢~
  • weinxin
七墨
Adobe软件最新全家桶(win、mac)
700多份网站主题源码

来一发,更加快活

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

目前评论:4   其中:访客  3   博主  1

    • 哈哈 哈哈 1

      emmmmm。。。。。这个特效我实现不了竟然,也不知道咋回事儿~

      • 哈哈 哈哈 1

        七墨七墨,我想把你这个js特效我拿走啦,哈哈哈,我会注名是来源转自你的……

        • 挨踢牛 挨踢牛 1

          网站做得不错哦

            • 七墨 七墨 博主

              @挨踢牛 谢谢,常来哦~