梓悦生活

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

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

2017/08/20 4286点热度 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
    取消回复

    最新 热点 随机
    最新 热点 随机
    Debian源更新报错解决方法 Linux调整文件系统大小的命令:resize2fs 哪吒监控面板搭建教程 将Azure机器配置的静态IP修改为动态IP地址 通用嵌入式DDNS脚本UE-DDNS 利用DNSPod实现动态域名解析DDNS
    将Azure机器配置的静态IP修改为动态IP地址Vultr 推出免费云主机,用于鼓励全球创新Cloudflare WARP 一键安装脚本 使用教程HostPanel开源免费主机管理面板谷歌将替换Chrome 117版本中的挂锁图标WARP使用教程:入门篇
    Inavit免费PHP和Asp.net空间数据库MSSQL 2008和MysqL空间250MB 老牌Freeftpspace.org提供500MB免费空间 cPanel面板 腾讯微博两周年,完成任务获得2次100%中奖机会,红绿蓝钻+实物大奖等你拿 summerhost提供1G容量免费美国空间、速度快 宝塔面板反向代理加速和自建CDN 首页文章显示缩略图方法
    最近评论
    B2B海外商城系统 发布于 12 小时前(09月21日) 感谢分享
    上海网站建设 发布于 2 个月前(07月11日) 感谢分享
    Unye Koltuk Yıkama 发布于 3 个月前(07月05日) Ünye Koltuk Yıkama. Koltuk temizliğinde kumaş ve d...
    Meteor 发布于 4 个月前(06月01日) 你的mysql版本看一下,我记得之前开发大佬在群里说过这个问题,5.6版本还是5.7版本来着。 我...
    ldsj007 发布于 4 个月前(05月25日) 老大,数据库连不上,是不是最新版必须用docker数据库了?
    标签聚合
    活动 虚拟主机 技巧 域名解析 Linux VPS wordpress 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