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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
微信小程序实现漂亮的弹窗效果
May 26 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
js实现数字跳动到指定数字
Aug 25 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
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
javascript new一个对象的实质
2010/01/07 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
JS简单计算器实例
2015/01/20 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
JS实现去除数组中重复json的方法示例
2017/12/21 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
flask入门之表单的实现
2018/07/18 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
python中字典增加和删除使用方法
2020/09/30 Python
Python os库常用操作代码汇总
2020/11/03 Python
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
平面设计岗位职责
2013/12/14 职场文书
体育专业自荐书
2014/05/29 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
刑事法律意见书
2015/06/04 职场文书
2015年信息技术教研组工作总结
2015/07/22 职场文书
教师培训学习心得体会
2016/01/21 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS