jQuery CSS3相结合实现时钟插件
2016-01-08 16:07
1196 查看
废话不多说了,直接给大家贴代码了。
效果图如下所示:
简洁代码如下:
<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>
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 数组方法汇总
- 如何使用CSS3画出一个叮当猫