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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
JavaScript获取当前url路径过程解析
Dec 27 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 短链接算法收集与分析
2011/12/30 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python中global用法实例分析
2015/04/30 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
selenium自动化测试入门实战
2020/12/21 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
什么是类的返射机制
2016/02/06 面试题
幼儿园教师师德师风演讲稿:爱我所爱 无悔青春
2014/09/10 职场文书
解决jupyter notebook启动后没有token的坑
2021/04/24 Python
Java设计模式之代理模式
2022/04/22 Java/Android