基于jQuery个性圆圈倒计时特效里面包含十几款不用效果的jQuery倒计时特效下载。效果图如下：

在线预览   源码下载

实现的代码。

html代码：

<section class="header">

    <div style="padding:20px;"><div id="rC"></div></div>

</section>

<div id="rC_A" class="redCountdownDemo"></div>

<div id="rC_B" class="redCountdownDemo"></div>

<div id="rC_F" class="redCountdownDemo"></div>

<div id="rC_D" class="redCountdownDemo"></div>

<div id="rC_C" class="redCountdownDemo"></div>

<div id="rC_E" class="redCountdownDemo"></div>

<div id="rC_PA" class="redCountdownDemo"></div>

            <div id="rC_PB" class="redCountdownDemo"></div>

            <div id="rC_PE" class="redCountdownDemo"></div>

            <div id="rC_PJ" class="redCountdownDemo"></div>

            <div id="rC_PC" class="redCountdownDemo"></div>

            <div id="rC_PD" class="redCountdownDemo"></div>

            <div id="rC_PF" class="redCountdownDemo"></div>

            <div id="rC_PK" class="redCountdownDemo"></div>

            <div id="rC_PG" class="redCountdownDemo"></div>

            <div id="rC_PH" class="redCountdownDemo"></div>

            <div id="rC_PI" class="redCountdownDemo"></div>

            <div id="rC_PL" class="redCountdownDemo"></div>

<script type="text/javascript">

    $('#rC_PA').redCountdown({ preset: "flat-colors", end: $.now() + 10000 });

    $('#rC_PB').redCountdown({ preset: "flat-colors-fat", end: $.now() + 10000 });

    $('#rC_PE').redCountdown({ preset: "flat-colors-very-fat", end: $.now() + 10000 });

    $('#rC_PJ').redCountdown({ preset: "flat-colors-black", end: $.now() + 10000 });

    $('#rC').redCountdown({ preset: "white", end: $.now() + 645600 });

    $('#rC_PC').redCountdown({ preset: "white", end: $.now() + 10000 });

    $('#rC_PD').redCountdown({ preset: "white-fat", end: $.now() + 10000 });

    $('#rC_PF').redCountdown({ preset: "white-very-fat", end: $.now() + 10000 });

    $('#rC_PK').redCountdown({ preset: "white-black", end: $.now() + 10000 });

    $('#rC_PG').redCountdown({ preset: "black", style: { secondsElement: { gauge: { fgColor: "#F00" }}}, end: $.now() + 10000 });

    $('#rC_PH').redCountdown({ preset: "black-fat", labels: false, end: $.now() + 10000 });

    $('#rC_PI').redCountdown({ preset: "black-very-fat", labelsOptions: { lang: { days: 'D', hours: 'H', minutes: 'M', seconds: 'S' }, style: 'font-size:0.5em; text-transform:uppercase;'

        }, end: $.now() + 10000 });

    $('#rC_PL').redCountdown({ preset: "black-black", labelsOptions: { style: 'font-size:0.5em; text-transform:uppercase;' } , end: $.now() + 10000 });

    $('#rC_B').redCountdown({

        end: $.now() + 10000,

        labels: true,

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#1abc9c"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            },

            hoursElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#2980b9"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            },

            minutesElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#8e44ad"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            },

            secondsElement: {

                gauge: {

                    thickness: .03,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "#f39c12"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#fff;'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_A').redCountdown({

        end: '1388468325',

        now: '1378441323',

        labels: true,

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#1abc9c"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            hoursElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#2980b9"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            minutesElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#8e44ad"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            secondsElement: {

                gauge: {

                    thickness: .01,

                    bgColor: "rgba(0,0,0,0.05)",

                    fgColor: "#f39c12"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_E').redCountdown({

        end: '1388468325',

        now: '1380501323',

        labels: true,

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#1abc9c",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            hoursElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#2980b9",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            minutesElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#8e44ad",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            },

            secondsElement: {

                gauge: {

                    thickness: .05,

                    bgColor: "rgba(0,0,0,0)",

                    fgColor: "#f39c12",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:#34495e;'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_D').redCountdown({

        end: '1397468325',

        now: '1388471324',

        labels: true,

        labelsOptions: {

            lang: {

                days: 'D',

                hours: 'H',

                minutes: 'M',

                seconds: 'S'

            },

            style: 'font-size:0.5em; text-transform:uppercase;'

        },

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            hoursElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            minutesElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            secondsElement: {

                gauge: {

                    thickness: .02,

                    bgColor: "rgba(255,255,255,0.1)",

                    fgColor: "rgba(255,255,255,1)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_C').redCountdown({

        end: '1390868325',

        now: '1388461323',

        labels: true,

        labelsOptions: {

            lang: {

                days: 'Dni',

                hours: 'Godzin',

                minutes: 'Minut',

                seconds: 'Sekund'

            },

            style: 'font-size:0.5em; text-transform:uppercase;'

        },

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            hoursElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            minutesElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            secondsElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.05)",

                    fgColor: "rgba(255,255,255,0.2)",

                    lineCap: 'round'

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

    $('#rC_F').redCountdown({

        end: '1390868325',

        now: '1388461323',

        labels: true,

        labelsOptions: {

            lang: {

                days: 'Dni',

                hours: 'Godzin',

                minutes: 'Minut',

                seconds: 'Sekund'

            },

            style: 'font-size:0.5em; text-transform:uppercase;'

        },

        style: {

            element: "",

            textResponsive: .5,

            daysElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            hoursElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            minutesElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            },

            secondsElement: {

                gauge: {

                    thickness: .2,

                    bgColor: "rgba(255,255,255,0.2)",

                    fgColor: "rgb(241, 196, 15)"

                },

                textCSS: 'font-family:\'Open Sans\'; font-size:25px; font-weight:300; color:rgba(255,255,255,0.7);'

            }

        },

        onEndCallback: function() { console.log("Time out!"); }

    });

</script>

http://www.w2bc.com/Article/38756

基于jQuery个性圆圈倒计时特效的更多相关文章

  1. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  2. 基于jquery结婚电子请柬特效素材

    分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  3. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  4. 基于jQuery左右滑动切换特效 附源码

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div ...

  5. 基于jQuery左右滑动切换特效

    分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. 基于jQuery HTML5人物介绍卡片特效

    基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

  9. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

随机推荐

  1. 【Servlet】使用org.eclipse.jetty实现小型的Servlet服务器

    import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...

  2. 跟我学SharePoint 2013视频培训课程——网站导航及页面元素（2）

    课程简介 第2天,介绍SharePoint 2013 网站导航及页面元素 视频 SharePoint 2013 交流群 41032413

  3. Python 文件 close() 方法

    描述 Python 文件 close() 方法用于关闭一个已打开的文件.关闭后的文件不能再进行读写操作, 否则会触发 ValueError 错误. close() 方法允许调用多次. 当 file 对 ...

  4. asp.net 浏览器下载文件的四种方式

    // 方法一:TransmitFile实现下载 protected void Button1_Click(object sender, EventArgs e) { Response.ContentT ...

  5. Microsoft.ACE.OLEDB.12.0 及其在 MSSQL中的使用

    1.Microsoft.ACE.OLEDB.12.0 简介 就是一个数据访问接口,用于在office文件和非office应用程序间传输数据.例如 Microsoft Office Access 201 ...

  6. Knockout: 让ViewModel从htm中剥离出去。

    在一些Knockout例子中,直接在htm中添加scripts写viewmodel,如何能将让ViewModel从htm中剥离出去呢?从knockout官网上找到了解决方法,如下: 1.knockou ...

  7. windows 环境使用 kafka

    近来学习 kafka,网上搜的教程好多不好用.在此开一贴记录一下学习过程.推荐官网,是最好的教程 http://kafka.apache.org/quickstart 官网上是linux 环境,我用的 ...

  8. win8.1安装驱动出现“文件的哈希值不在指定的目录”的解决办法[zz]

    1.鼠标移到右下角,点击“设置”,再点击“更改电脑设置”2.点击最后一个“更新和回复”,再点击“恢复”3.点击“恢复”之后,在右边点击高级启动下面的“重新启动”4.等一会会出现几个选项,点击“疑难解答 ...

  9. PHP断点调试工具Xdebug的安装

    Xdebug是一个PHP程序调试器,可以用来跟踪,调试和分析PHP程序的运行状况.其实调试PHP还有其他工具比如Zend Debugger,但zend官方不是免费发布的,后来更新为zend Serve ...

  10. unity, Animator.ResetTrigger

    解: 正确的写法应该是:Animator.SetTrigger("unfoldTrigger")Animator.ResetTrigger("unfoldTrigger& ...