[科技]基于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>