jQuery CSS3相结合实现时钟插件
废话不多说了，直接给大家贴代码了。
效果图如下所示：
简洁代码如下：
<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>
-
本文向大家介绍SpringBoot整合mybatis结合pageHelper插件实现分页，包括了SpringBoot整合mybatis结合pageHelper插件实现分页的使用技巧和注意事项，需要的朋友参考一下 SpringBoot整合mybatis分页操作 SpringBoot整合Mybatis进行分页操作，这里需要使用Mybatis的分页插件：pageHelper， 关于pageHelper的
-
主要内容：1 案例-Swing实现时钟1 案例-Swing实现时钟 输出结果为：
-
本文向大家介绍js实现动态时钟，包括了js实现动态时钟的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现动态时钟的具体代码，供大家参考，具体内容如下 示例展示： 更多JavaScript时钟特效点击查看：JavaScript时钟特效专题 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Qt实现简易时钟，包括了Qt实现简易时钟的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Qt实现简易时钟展示的具体代码，供大家参考，具体内容如下 一、效果展示 简单实现时钟（圆盘+QLCDNumber），大小刻度，数字等。 二、实现 .pro .h .cpp 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍javascript实现时钟动画，包括了javascript实现时钟动画的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了javascript实现时钟动画的具体代码，供大家参考，具体内容如下 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍又一款js时钟!transform实现时钟效果，包括了又一款js时钟!transform实现时钟效果的使用技巧和注意事项，需要的朋友参考一下 又来一个时钟效果了，这个的实现不需要canvas，都是div、ul、li画出的，好玩有真实。 哈哈~ 需要的js才能实现到走动这个效果，但js的内容不多，也不难。 主要是一个css里transform的使用的思路，transform里有很多变