投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 界面UI滚动 / JQueryCanvas环形进度条特效效果
JQueryCanvas环形进度条特效效果
标签:

插件介绍

    这是一款JQuery Canvas环形进度条插件,对相应的img元素应用ShadowRing函数,可用于JQuery.ajax上传图片文件时xhr.upload的"progress"事件的回调函数。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-21
    阅读:

JQueryCanvas环形进度条特效效果

简要教程

这是一款JQuery Canvas环形进度条插件,对相应的img元素应用ShadowRing函数,可用于JQuery.ajax上传图片文件时xhr.upload的"progress"事件的回调函数。

使用方法

在页面引入以下jquery-1.10.2.js、shadowring.js文件

<script src="js/jquery-1.10.2.js"></script>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/shadowring.js"></script>
<script type="text/javascript">
    $(function() {
        $("#update").click(sc);
    })
   
    function sc() {
   
        for(let i = 1; i <= 100; i++) {
            setTimeout(`shadow(${i})`, i * 50);
        }
    }
   
    function shadow(val) {
        $("img").each((i, x) => {
            if($(x)[0].offsetHeight > 0) {
                $(x).ShadowRing({
                    r: 350,
                    ti: val,
                    count: 100,
                    offset: 10,
                    fontsize: 50,
                    fontfamily: "clock2"
                })
            }
        });
    }
</script>