CSS3+jQuery实现时钟插件
2016-01-07 19:40
633 查看
查看效果:http://hovertree.com/texiao/hoverclock/demo4.htm
本插件使用方便,可以在博客园的页面中使用,请看本页面右侧:/article/6453345.html
简洁代码如下:
效果图图下:
完整代码如下:
更多:/article/6453322.html
本插件使用方便,可以在博客园的页面中使用,请看本页面右侧:/article/6453345.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 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>
更多:/article/6453322.html
相关文章推荐
- jquery eval解析JSON中的注意点介绍
- jquery操作select(设置选中值,取选中值)
- jQuery最佳实践
- blueimp/jquery-File-Upload中文文档
- 使用JQuery UI完成可输入内容且自动匹配的的下拉列表
- 使用jquery实现表单点击进入、移出变色效果(三)
- 实例讲解jquery与json的结合
- 使用jquery实现表单点击进入、移出变色效果(二)
- jquery的animate设置样式overflow:hidden的解决方法
- 基于jquery实现表格无刷新分页
- 使用jquery实现表单点击进入、移出变色效果(一)
- jQuery版本冲突问题解决与分析
- jQuery全屏滚动插件fullPage.js
- jquery属性选择器使用事例
- jQuery的$.browser的版本兼容问题
- jquery选择器的使用事例
- 使用jquery现实图片切换效果
- 鼠标聚焦到TextBox输入框时,按回车键刷新页面原因及解决方法
- jquery on() 给js动态新添加的元素 绑定的点击事件。
- 12 个非常实用的 jQuery 代码片段