jQuery CSS3相结合实现时钟插件
更新时间：2016年01月08日 16:07:53 作者：roucheng
这篇文章主要介绍了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>
相关文章
我们今天要做的是手风琴panel，jquery.ui里面有个叫做accordtion的插件，我们要实现的效果和他一样2012-08-08
这篇文章主要介绍了JQuery中extend的用法,实例分析了extend的功能、定义及相关使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jquery实现简单文字提示效果的方法,以完整实例形式分析了jQuery插件jquery-1.2.6.pack.js实现文字提示效果的相关技巧,并提供了jquery-1.2.6.pack.js的本站下载地址,需要的朋友可以参考下2015-12-12
JavaScript和JQuery实用代码片段，喜欢学习jquery的朋友可以参考下。2010-04-04
这篇文章主要为大家详细介绍了jQuery实现呼吸轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了jquery validate表单验证插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
jQuery模拟实现的select点击选择效果【附demo源码下载】
这篇文章主要介绍了jQuery模拟实现的select点击选择效果,涉及jQuery响应鼠标点击动态修改页面元素样式的相关操作技巧,并附带demo源码供读者下载,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了jQuery实现div拖拽效果的方法,结合实例形式分析了jQuery响应鼠标事件实现页面元素样式变换的技巧与相关注意事项,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了jQuery zTree树插件动态加载效果的实例代码,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了jquery实现左右滑动菜单效果代码,涉及jquery鼠标事件及页面元素动态变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
最新评论