zoukankan      html  css  js  c++  java
  • 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>

    效果图图下:

    HoverClock

    完整代码如下:

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

    更多:http://www.cnblogs.com/roucheng/p/texiao.html

  • 相关阅读:
    vue 无缝无限滚动横条实现
    小程序 recycle-view 个人demo
    js 笔记
    java整理的一些面试资料
    使用js获取浏览器地址栏里的参数
    java面试题
    sql中索引不会被用到的几种情况
    常用linux命令
    shiro登录成功之后跳转原路径
    springboot 整合 mongodb实现 批量更新数据
  • 原文地址:https://www.cnblogs.com/roucheng/p/css3clock.html
Copyright © 2011-2022 走看看