jQuery+CSS3实现精美时钟特效插件

jQuery+CSS3实现精美时钟特效插件

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

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

1
2
3
<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作为时钟的容器。

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

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

1
2
3
4
5
$(document).ready(function(){
 
  $(".clock-place").CodehimClock();
 
});

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

1
2
3
4
5
6
7
$(document).ready(function(){
 
  $(".clock-place").CodehimClock({
   clockSize: "original",
   });
 
});
  • 响应式设计,可调节、可定制。
  • 代码简洁,使用简单。
  • 支持三种尺寸的时钟显示:X small, X large和250x250的原始尺寸。
  • 时钟动画使用CSS3动画来制作。
  • 采用服务器时间,提高时间的精确度。
  • 支持Chrome, Safari, Firefox, Opera, IE7+, IOS, Android 和 windows phone。
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论