查看效果：http://hovertree.com/texiao/hoverclock/demo4.htm

本插件使用方便，可以在博客园的页面中使用，请看本页面右侧：http://www.cnblogs.com/roucheng/p/css3clock.html

简洁代码如下：

<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 </a> <a href="http://hovertree.com/texiao/hoverclock/demo2.htm">Demo </a>

<a href="http://hovertree.com/texiao/hoverclock/demo3.htm">Demo </a> <a href="http://hovertree.com/texiao/hoverclock/demo4.htm">Demo </a></div>

    </div>

    <script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script>

    <script>

        $("#hoverclock").hoverclock({

            "h_width":,

            "h_height":,

            //"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>

更多：http://www.cnblogs.com/roucheng/p/texiao.html

CSS3+jQuery实现时钟插件的更多相关文章

  1. 10款最新CSS3/jQuery菜单导航插件

    这是我们在2014年收集的10款最新的CSS3 / jQuery菜单导航插件,不论从外观样式,还是功能扩展性,这些jQuery菜单一定可以满足大家的设计需求.这次我们收集的jQuery菜单,有水平 菜 ...

  2. MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

  3. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  4. 使用jQuery和CSS3制作数字时钟(jQuery篇) 附源码下载

    HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" ...

  5. 提升用户体验的最佳免费 jQuery 表单插件

    网页表单是一个老生常谈的话题.出于这样或那样的目的,一些示例中都会包括用户注册,电子商务结算,用户设置甚至联系人表格.而输入栏是非常容易用现代的CSS3技术来应用样式.但是到底什么决定整体用户体验? ...

  6. 推荐15款最佳的 jQuery 分步引导插件

    当用户浏览到一个网站,它可能从不知道如何浏览,如何操作网站或 Web 应用程序的内容和流程.在这篇文章中,我们编制了一些最好的 jQuery 引导插件列表.你会发现这些插件对于提高你的网站的整体用户体 ...

  7. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  8. HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

    前言 由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现.[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础上修改的 ...

  9. 使用 CSS3 & jQuery 制作漂亮的书签动画

    今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...

随机推荐

  1. 如何解决audiodg占用内存高（停止与重启audiodg服务）

    window7电脑audiodg.exe进程占用内存很高 首先想到的办法是结束该进程,于是在任务管理器里结束进程后,内存是释放了,但是发现发现电脑没有声音 去到电脑的system32目录下双击audi ...

  2. 学习笔记：java并发编程学习之初识Concurrent

    一.初识Concurrent 第一次看见concurrent的使用是在同事写的一个抽取系统代码里,当时这部分代码没有完成,有许多的问题,另一个同事接手了这部分代码的功能开发,由于他没有多线程开发的经验 ...

  3. ASP.NET Web API 2.1支持Binary JSON（Bson）

    ASP.NET Web API 2.1内建支持XML.Json.Bson.form-urlencoded的MiME type,今天重点介绍下Bson.BSON是由10gen开发的一个数据格式,目前主要 ...

  4. 用FlexGrid做开发，轻松处理百万级表格数据

    表格数据处理是我们项目开发中经常会遇到的设计需求之一,所需处理的数据量也较大,通常是万级.甚至百万级.此时,完全依赖平台自带的表格工具,往往无法加载如此大的数据量,或者加载得很慢影响程序执行. 那么, ...

  5. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  6. StartUML的基础的使用，用例图，序列图

    转载地址  http://blog.csdn.NET/tianhai110 (下面参考了原博主的内容,也加入自己的内容,为了自己脑补,也方便其他看到的人脑补) 使用StartUML绘制用例图:     ...

  7. Angular1还是Angular2

    Angular1还是Angular2 学完angular1,尝试去看了下angular2,虽然号称更强更快,可是这基于ES6和TypeScript的全新框架让人完全招架不住,而且我只是需要angula ...

  8. Plant Design Review Based on AnyCAD

    Plant Design Review Based on AnyCAD eryar@163.com Abstract. AVEVA Review is used to 3D model visuali ...

  9. Vue.js学习笔记（8）拖放

    小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...

  10. .Net 转战 Android 4.4 日常笔记（5）--新软件Android Studio 0.5.8安装与配置及问题解决

    说真心话,Eclipse跟我们.net的VS比起来就是屌丝比高富帅,一切都是那么的难用,速度慢得我无法忍受 于是想试试Google钦点的Android Studio IDE工具,这跟ADT一样也是一套 ...