CSS3+jQuery实现时钟插件

查看效果：http://hovertree.com/texiao/hoverclock/demo4.htm

本插件使用方便，可以在博客园的页面中使用，请看本页面右侧：http://www.cnblogs.com/roucheng/p/css3clock.html

简洁代码如下：

<link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
<script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script><div id="hoverclock"></div>
<script>
$("#hoverclock").hoverclock({
"h_width":500,
"h_height":500,
//"h_hourNumSize": "80",
// "h_hourNumRadii": "200",
// "h_hourNumShow": false,
// "h_minuteNumShow":false,
"h_hourNumColor": "deeppink",
"h_backColor": "yellow",
// "h_borderColor": "gold",
//"h_frontColor":"red",
"h_linkText": "HoverClock"
});
</script>

效果图图下：

完整代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" /><script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script><style>body {margin: 0px;padding: 0px;}div {padding: 0px;}</style><meta name="viewport" content="width=device-width, initial-scale=1" /><title>HoverClock - HoverTree</title><base target="_blank" />
</head><body><div style="width:500px;margin:10px auto;"><div id="hoverclock"></div><div><br /><a href="http://hovertree.com/h/bjaf/hoverclock.htm">Help</a> <a href="http://hovertree.com/texiao/hoverclock/">Demo 1</a> <a href="http://hovertree.com/texiao/hoverclock/demo2.htm">Demo 2</a>
<a href="http://hovertree.com/texiao/hoverclock/demo3.htm">Demo 3</a> <a href="http://hovertree.com/texiao/hoverclock/demo4.htm">Demo 4</a></div></div><script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script><script>$("#hoverclock").hoverclock({"h_width":500,"h_height":500,//"h_hourNumSize": "80",// "h_hourNumRadii": "200",// "h_hourNumShow": false,// "h_minuteNumShow":false,"h_hourNumColor": "deeppink","h_backColor": "yellow",// "h_borderColor": "gold",//"h_frontColor":"red","h_linkText": "HoverClock"});</script>
</body>
</html>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

CSS3+jQuery实现时钟插件相关推荐

html.gmt文件,基于格林威治标准时间（GMT）的jQuery模拟时钟插件
jClocksGMT是一款基于格林威治标准时间(GMT)的jQuery模拟时钟插件.你可以调整时区的偏移值来显示相应地区的时间,还能够自动转换夏令时时间.它的特点还有: 模拟时钟. 电子时钟. 可以显 ...
jQuery和CSS3精美时钟插件
下载地址一款jQuery和CSS3精美时钟插件.该插件使用简单,易于扩展,采用响应式设计,可以制作出非常逼真的时钟效果.主要特色响应式设计,可调节.可定制.代码简洁,使用简单.支持三种尺寸的时钟显示 ...
html日期选择器日历并记录事件,8个基于jQuery和HTML5的日历时钟插件
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
php html5日期插件,基于jQuery和HTML5的日历时钟插件的图文详解
jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错.有兴趣的朋友 ...
15款很有用的jquery时钟插件和教程
jQuery是现在使用最广泛的JS库.在你的网站里里可以使用着15款jQuery时钟插件.对于网站设计和开发人员来说,这是一个好消息.使用它们能使你的网站更美和更吸引人. 1.JDIGICLOCK 它 ...
【看完想不会都难系列教程】 - （1）使用CSS3+JQuery easing 插件制作绚丽菜单
在本教程中,我们将创建一个独特的滑动框导航.这样做可以让有菜单的盒子滑出,并且弹出缩略图.在某些菜单项中我们还包含着有进一步链接的子菜单.取决于我们鼠标在菜单项上的停悬,子菜单将向左或向右滑动. 我们 ...
jquery时钟插件
jquery时钟插件可以获取到本地当前时间的时钟表插件引用插件编写代码: <body> <div class="wrapper clearfix show" ...
html页面时钟插件,Clock.jsHTML5模拟时钟jQuery插件
插件描述:clock.js是一款简单的HTML5模拟时钟jQuery插件.该HTML5模拟时钟基于Canvas制作,有3种内置的主题,它带有时钟表盘界面和数字刻度,简单实用. 使用方法使用该时钟插件 ...
html页面时钟插件,Clock.js-HTML5模拟时钟jQuery插件
clock.js是一款简单的HTML5模拟时钟jQuery插件.该HTML5模拟时钟基于Canvas制作,有3种内置的主题,它带有时钟表盘界面和数字刻度,简单实用. 使用方法使用该时钟插件需要在页面 ...

CSS3+jQuery实现时钟插件

CSS3+jQuery实现时钟插件相关推荐

最新文章

热门文章