过年了，开发一款春节创意进度条插件，让你的网站都带有春节的气息

最新推荐文章于 2025-01-28 18:26:46 发布

原创

最新推荐文章于 2025-01-28 18:26:46 发布 · 544 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

本文介绍了如何在过年期间为网站增添春节气氛，通过开发一款特色进度条插件，展示效果、使用方法及源码，让网站充满年味。使用jQuery，插件类型包括'年年有鱼'和'打运营'等。

前言

快过年了，为了让网站带有春节的气息，，开发带有春节特色的进度条。

效果演示

在这里插入图片描述

在线体验

使用说明

在项目中引入jquery、进度条插件,将如下代码加入页面head元素中。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://dcs4569.github.io/js/farmer.progress.js"></script>

指定页面元素执行progress函数，则在元素后面添加进度条，代码如下：

//年年有鱼
$('#demo').progress({type:'fish'},function(){
    width ++;
    if(width < 10){
        return 10;
    }
    return width;
});

//打运营
$('#demo').progress({type:'farmer',},function(){
    width ++;
    if(width < 10){
        return 10;
    }
    return width;
});

//默认
$('#dem