CSS3+jQuery实现时钟插件

查看效果：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>

效果图图下：

CSS3+jQuery实现时钟插件

完整代码如下：

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

秒客网

CSS3+jQuery实现时钟插件

相关文章