当前位置:JS特效 » 其他 » jQuery和CSS3精美时钟插件
 jQuery和CSS3精美时钟插件
如果您觉得内容不错,请分享:
标签: 时钟时钟插件

插件介绍

这是一款jQuery和CSS3精美时钟插件。该插件使用简单,易于扩展,采用响应式设计,可以制作出非常逼真的时钟效果。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:129
简要教程

这是一款jQuery和CSS3精美时钟插件。该插件使用简单,易于扩展,采用响应式设计,可以制作出非常逼真的时钟效果。它的特点还有:

  • 响应式设计,可调节、可定制。
  • 代码简洁,使用简单。
  • 支持三种尺寸的时钟显示:X small, X large和250x250的原始尺寸。
  • 时钟动画使用CSS3动画来制作。
  • 采用服务器时间,提高时间的精确度。
  • 支持Chrome, Safari, Firefox, Opera, IE7+, IOS, Android 和 windows phone。

使用方法

在页面中引入codehim-clock.css文件,以及jquery和jquery.codehim.clock.js文件。

 
             
             
                
HTML

使用一个

作为时钟的容器。

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery时钟插件。

$(document).ready(function(){

  $(".clock-place").CodehimClock();

});                
                

或者在初始化时传入参数,来指定时钟的尺寸。

$(document).ready(function(){

  $(".clock-place").CodehimClock({
   clockSize: "original", 
   });

});       
                

该jQuery和CSS3精美时钟插件的github地址为:https://github.com/CodeHimBlog/jquery-codehim-analog-clock

Top