你的位置:首页 > Java教程

[Java教程]基于jQuery个性圆圈倒计时特效


基于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