jQuery CSS3相结合实现时钟插件

废话不多说了，直接给大家贴代码了。

效果图如下所示：

简洁代码如下：

<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>

以上就是本文章的内容，希望对大家有所帮助