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 相关文章推荐
js弹出窗口之弹出层的小例子
Jun 17 Javascript
javascript打开word文档的方法
Apr 16 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
动态加载js、css的实例代码
May 26 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
利用js对象弹出一个层
2008/03/26 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
在python shell中运行python文件的实现
2019/12/21 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
你对IPv6了解程度
2016/02/09 面试题
员工培训邀请函
2014/01/11 职场文书
中学生评语大全
2014/04/18 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
五四青年节演讲稿
2014/05/26 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技