jQuery CSS3相结合实现时钟插件


Posted in Javascript onJanuary 08, 2016

废话不多说了,直接给大家贴代码了。

效果图如下所示:

 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>
Javascript 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JS控制表单提交的方法
Jul 09 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
node实现基于token的身份验证
Apr 09 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
js实现对ajax请求面向对象的封装
Jan 08 #Javascript
javascript弹性运动效果简单实现方法
Jan 08 #Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
jquery实现简单的遮罩层
Jan 08 #Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
You might like
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
node 版本切换的实现
2020/02/02 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python xlsxwriter模块的使用
2020/12/24 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
打架检讨书100字
2014/01/19 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
法制宣传标语
2014/06/23 职场文书
争做文明公民倡议书
2019/06/24 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python