梓悦生活

  • 🍟首页
  • 🍪免费资源
  • 🍓Wordpress
  • 🍋琐碎生活
  • 🍘关于
关注周围的人或事,体验人生历程
  1. 首页
  2. Wordpress
  3. 正文

博客返回顶部环形进度效果

2017/08/20 3902点热度 0人点赞 3条评论

大致原理就是根据滚动距离和文档高度排定滚动百分比然后绘制画布,百分比数字是用data储存并使用css的 content属性实现。

搜狗截图20141129214647.png

实现方法

确保引入了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:

#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");

颜色参数即可,默认黑色

 

转载自:http://nimaboke.com/code/251.html

效果:http://www.imjiayin.com

标签: 技巧
最后更新:2017/08/20

Meteor

关注周围的人或事,体验人生历程!

点赞
< 上一篇
下一篇 >

文章评论

  • 明月登楼学习笔记

    不错,过来赞一个先!

    2017/12/03
    回复
  • 豪兔

    博客新手……求问这个JS文件怎么修改啊。我在wordpress后台的外观下面的编辑里面看到我的主题模板有2个JS文件,一个是-custom.js,还一个是modernizr.js,我在custom.JS 文件下把代码全部复制到最后面,结果能看到那个圆环,但是是固定在最底部的……
    它的位置怎么设置呢?另外参考CSS有什么用啊……电脑新手,求指点……

    2018/01/18
    回复
    • Meteor

      @豪兔 圆环的位置是通过CSS定位来设置的,你加入了JS代码,虽然能看到,但位置不对。请将CSS代码加入到你的syste.css。
      可参考演示:pxsky.cn

      2018/01/19
      回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    Vultr 推出免费云主机,用于鼓励全球创新 一键网络重装系统 – 魔改版(适用于Linux / Windows) Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙 [云监控探针]支持节点管理和监控的ServerStatus 宝塔面板7.7.0版本及以下解锁付费插件开心版方法 宝塔面板版本降级至7.7.0方法
    一键网络重装系统 – 魔改版(适用于Linux / Windows)MyNodeQuery一款简洁好用的云监控探针宝塔面板如何取消绑定或强制登录宝塔账号宝塔面板版本降级至7.7.0方法宝塔面板7.7.0版本及以下解锁付费插件开心版方法Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙
    周末天气不错 Zymic免费6G支持PHP稳定空间 阿根廷顶级免费.COM.AR域名申请 wordpress友情链接自定义顺序 100MB/1GB/CP/techkid.net [干货] Paypal贝宝支付送优惠券
    最近评论
    Meteor 发布于 2 周前(03月09日) 是的,要求的配置也要高很多,不一定所有服务器都适用
    夏日博客 发布于 3 周前(03月04日) 高版本的win系统越来越不好装了。
    侠客书 发布于 4 个月前(11月29日) 具体改了些什么?
    rtyu 发布于 6 个月前(10月07日) 来过,留个印迹~
    Adoncn 发布于 1 年前(01月10日) 不错!!!不错!!!
    标签聚合
    虚拟主机 技巧 wordpress 活动 域名解析 Linux VPS Linux技巧
    友情链接
    • Anders Norén
    • Appurse
    • CSS参考手册
    • DeeTeam-迪提姆
    • Fatesinger
    • FreeSSL
    • gandi
    • Internetbs
    • Kevan's Blog
    • LogoMaker

    COPYRIGHT © 2023 梓悦生活. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang