基于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
基于jQuery个性圆圈倒计时特效的更多相关文章
- 动漫网站基于jquery的横向手风琴特效
今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- 基于jquery结婚电子请柬特效素材
分享基于jquery结婚电子请柬特效素材总共包含3个部分,第一部分是开着小轿车缓缓进入场景,第二部分是相册,第三部分是祝福墙.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
- 基于jQuery左右滑动切换特效 附源码
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效. 效果图如下: 废话不多说,代码奉上! html代码: <div ...
- 基于jQuery左右滑动切换特效
分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 10款基于jquery的web前端特效及源码下载
1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery HTML5人物介绍卡片特效
基于jQuery HTML5人物介绍卡片特效.这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
随机推荐
- Docker stop停止/remove删除所有容器
原文地址:https://blog.csdn.net/superdangbo/article/details/78688904 docker ps // 查看所有正在运行容器$ docker stop ...
- 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法
下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片 将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...
- 豆瓣上9分以上的IT书籍-编程技术篇
在豆瓣上9分以上的IT书籍-编程语言篇中,收集了很多优秀的编程语言书籍,也得到了不少读者的喜欢.不过也有一些读者留言说某某书为什么没有,一种是因为某些书并不算讲某种编程语言的,一种是由于豆瓣9分以上这 ...
- 【LeetCode-面试算法经典-Java实现】【059-Spiral Matrix II(螺旋矩阵II)】
[059-Spiral Matrix II(螺旋矩阵II)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given an integer n, generate a ...
- python selenium 常见问题列表
python selenium webdriver 常见问题FAQ 另一个FAQ: https://code.google.com/p/selenium/wiki/FrequentlyAskedQue ...
- CentOS7 安装java 环境 摘抄
转http://www.diyhi.com/hostConfig.html 服务器环境配置 下面介绍全新安装的CentOS系统服务器安装配置商城软件服务环境的方法.演示主机操作系统为CentOS 7. ...
- 如何在open xml excel 中存储自定义xml数据?
如何在open xml excel 中存储自定义xml数据? 而且不能放在隐藏的cell单元格内,也不能放在隐藏的sheet内,要类似web网站的Application变量,但还不能是VBA和宏之类的 ...
- fiddler 抓取iphone发出的http和https包
1.清理iphone的描述文件,在通用里面设置.这一步目的防止手机里面已经存在了DO_NOT_TRUST_FiddlerRoot证书,导致后面抓不了包,所以先清理下 2.下载安装fiddler,百度或 ...
- php反射获取类和方法中的注释
通过php中的反射机制,获取该类的文档注释,再通过获取其所有的方法,获取方法的注释 所用到的主要类及其方法 ReflectionClass ReflectionClass::getDocComment ...
- linux(centos6)搭建ftp服务器 -摘自网络
前提 ssh服务已经开启,关闭防火墙,主机和虚拟机能ping通 查看ssh和防火墙的状态 service sshd status service iptables status 开启ssh服务 ser ...