jQuery+CSS3实现精美模拟时钟

 查看演示  website  立即下载

该插件使用简单，易于扩展，采用响应式设计，可以制作出非常逼真的时钟效果。它的特点还有：

• 响应式设计，可调节、可定制。

• 代码简洁，使用简单。

• 支持三种尺寸的时钟显示：X small, X large和250x250的原始尺寸。

• 时钟动画使用CSS3动画来制作。

• 采用服务器时间，提高时间的精确度。

• 支持Chrome, Safari, Firefox, Opera, IE7+, IOS, Android 和 windows phone。

使用方法

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

<link href="css/codehim-clock.css" rel="stylesheet"> 
<script type="text/javascript" src="js/jquery.min.js"></script>             
<script type="text/javascript" src="js/jquery.codehim.clock.js"></script>

HTML

使用一个<div>作为时钟的容器。

<div class="clock-place"> </div>

初始化插件

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

$(document).ready(function(){
 
  $(".clock-place").CodehimClock();
 
});

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

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

PREVIOUS:
NEXT:
原生js alert弹窗插件（原创）
jQuery响应式无限滚动瀑布流