查看效果：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. 实践.Net Core在Linux环境下的第一个Hello World

    基础环境和相关软件准备 1.CentOS7.1 64位系统(或者其他CentOS版本的64位系统) 2.WinSCP软件(主要是方便管理和编辑Linux系统的文件) 3.XShell软件(Window ...

  2. C#与Java对比学习：数据类型、集合类、栈与队列、迭达、可变参数、枚举

    数据类型: C#:String与StringBuilder Java:String与StringBuffer 第一个不习惯是string的第一个字母必须大写了. 第二个不习惯是int得写成Intege ...

  3. 通杀所有系统的硬件漏洞？聊一聊Drammer，Android上的RowHammer攻击

    通杀所有系统的硬件漏洞?聊一聊Drammer,Android上的RowHammer攻击 大家肯定知道前几天刚爆出来一个linux内核(Android也用的linux内核)的dirtycow漏洞.此洞可 ...

  4. 【直播】APP全量混淆和瘦身技术揭秘

    [直播]APP全量混淆和瘦身技术揭秘 近些年来移动APP数量呈现爆炸式的增长,黑产也从原来的PC端转移到了移动端,通过逆向手段造成数据泄漏.源码被盗.APP被山寨.破解后注入病毒或广告现象让用户苦不堪 ...

  5. ASP.Net请求处理机制初步探索之旅 - Part 2 核心

    开篇:上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):Ht ...

  6. [.net 面向对象程序设计深入]（6）.NET MVC 6 —— 模型、视图、控制器、路由等的基本操作

    [.net 面向对象程序设计深入](6).NET MVC 6 —— 模型.视图.控制器.路由等的基本操作 1. 使用Visual Studio 2015创建Web App (1)文件>新建> ...

  7. 2013 duilib入门简明教程 -- 响应按钮事件(4)

        上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI;     也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介 ...

  8. ElasticSearch ik分词安装

    1.下载对应版本的ES ik分词 https://github.com/medcl/elasticsearch-analysis-ik/releases 2.解压elasticsearch-analy ...

  9. php的函数和数组

    //php函数//1.简单函数//四要素:返回类型,函数名,参数列表,函数体/*function Show(){    echo "hello";}Show();*///2.有返回 ...

  10. iOS—Xcode 7真机测试

    Xcode 7真机测试详解 1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk im ...