查看效果：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. Python黑帽编程2.6 模块

    Python黑帽编程2.6 模块 我们已经学习了如何在你的程序中定义一次函数而重用代码.如果你想要在其他程序中重用很多函数,那么你该如何编写程序呢?你可能已经猜到了,答案是使用模块.模块基本上就是一个 ...

  2. 一个Java程序员的实习总结（2）

    在今天的总结里,主要讲述第二.三周这半个月的培训情况,并且穿插讲讲我对实习和见习的看法,有需要有兴趣的童鞋可以看看. 半个月的见习 其实我更愿意把实习和见习分开讲,实习指的是还没签三方或者直接就是大三 ...

  3. JavaScript状态机程序逻辑编辑器

    制作背景 之前做Win8 Metro动态加载内容框架的时候,由于采用了XAML+JavaScript的方法,程序复杂的执行逻辑是由JavaScript控制的,而页面一多,流程一复杂,制作起来就非常麻烦 ...

  4. xamarin UWP自定义圆角按钮

    uwp自带的button本身不支持圆角属性,所以要通过自定义控件实现. 通过设置Button的Background=“{x:Null}”设置为Null使背景为空,再设置Button.Content中的 ...

  5. Java异常内容总结

    在程序开发中,可能存在各种错误,有些错误是可以避免的,而有些错误却是意想不到的,在Java中把这些可能发生的错误称为异常. Throwable类是所有异常类的超类,该类的两个直接子类是Error和Ex ...

  6. android 画虚线,虚线圆

    Paint paint = new Paint(); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE);   paint.set ...

  7. Discuz门户首页关键词和描述显示“首页”的解决方法

    Discuz社区在后台设置好门户标题.关键字.描述,更新缓存,发现用户登录状态下,门户首页的关键字和描述正常显示:但在游客状态下不显示,在某工具中查看到的情况如下: 现找到两种解决办法:(记得修改前备 ...

  8. SSRS 报表点击 Preview 显示失败

    今天使用Remote Desktop 链接到Remote Server,在SSDT中创建一个RDL文件,点击PreView预览时,出现以下错误信息 查看details information ==== ...

  9. 回发或回调参数无效。在配置中使用 pages enableEventValidation=true 或在页面中使用 %@ Page EnableEventValidation=true % 启用了事件验证

    WebForm中回发或回调参数无效问题的解决 解决 .NET中回发或回调参数无效问题的解 该错误的详细提示信息为: 回发或回调参数无效.在配置中使用 <pages enableEventVali ...

  10. react+reflux入门教程

    为了简化react的flux带来的冗余操作,社区的同仁们给我们带来了很多优秀的轮子,诸如redux,reflux等.今天我们就通过逐行讲解代码实例的方法,感受一番reflux的设计之美. 例子 这个例 ...