查看效果：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. JPEG文件结构

    JPEG文件由八个部分组成,每个部分的标记字节为两个,首字节固定为:0xFF,当然,准许在其前面再填充多个0xFF,以最后一个为准.下面为各部分的名称和第二个标记字节的数值,用ultraedit的16 ...

  2. 再谈SQL Server中日志的的作用

    简介     之前我已经写了一个关于SQL Server日志的简单系列文章.本篇文章会进一步挖掘日志背后的一些概念,原理以及作用.如果您没有看过我之前的文章,请参阅:     浅谈SQL Server ...

  3. 排序合并连接(sort merge join)的原理

    排序合并连接(sort merge join)的原理 排序合并连接(sort merge join)的原理     排序合并连接(sort merge join)       访问次数:两张表都只会访 ...

  4. Centos 使用YUM安装MariaDB

    1.在 /etc/yum.repos.d/ 下建立 MariaDB.repo,内容如下: [azureuser@mono etc]$ cd /etc/yum.repos.d [azureuser@mo ...

  5. Mina入门教程（二）----Spring4 集成Mina

    在spring和mina集成的时候,要十分注意一个问题:版本. 这是一个非常严重的问题,mina官网的demo没错,网上很多网友总结的代码也是对的,但是很多人将mina集成到spring中的时候,总是 ...

  6. 微软CMS项目 Orchard 所用到的开源项目

    研发了Orchard一年左右了,时常遇到瓶颈,总觉得力不从心,其实并不是基础不够,关键还是概念性的东西太多,一会儿这个概念名词,一会那个,关于Orchard的技术文档也的确很少,每次看起来总是焦头烂额 ...

  7. 我为什么很烦在DB服务器上安装杀毒软件

    常见的数据库连接问题无外乎是在数据库服务器本地可以连接SQL Server,但通过其他服务器就不可以连接.但这次我却碰到了相反的情况,在服务器本地无法通过IP/实例名连接,但从其他服务器却可以.而且每 ...

  8. New Year's resolution for 2016

    A New Year's resolution is a traditional for me to celebrate a new beginning. For the past year, I h ...

  9. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  10. Vue2.0实现1.0的搜索过滤器功能

    Vue2.0删除了很多1.0的比较实用的过滤器,如filterBy,orderBy.官方文档给了通过计算属性实现1.0搜索过滤器功能,自己又加入了大小写通用检索功能,比较简单,学一下. <bod ...