首先非常感谢网友老鼠的无私分享,此作品是一款jquery+html5实现的时钟插件clock,配合了jquery的旋转插件jQueryRotate实现的,主要是用了很多个背景图片,如时钟、时、分、秒针,这些图片全都在插件的参数配置里面动态配置。。。
由于使用了html5的原因,所以大家在浏览作品的时候请使用支持html5的浏览器,如谷歌、火狐等。。。
参数配置如下:
var config = {
divId: "html5-clock",
useSecondHand: "true",
clockWidthAndHeight: "200",
clockFaceImg: "images/bg/clockBg.png",
hourHandImg: "images/bg/hourHand.png",
minuteHandImg: "images/bg/minuteHand.png",
secondHandImg: "images/bg/secondHand.png",
clockFaceHighResImg: "images/bg/clockBgHighRes.png",
hourHandHighResImg: "images/bg/hourHandHighRes.png",
minuteHandHighResImg: "images/bg/minuteHandHighRes.png",
secondHandHighResImg: "images/bg/secondHandHighRes.png",
smoothRotation: "false",
secondHandSpeed: "100"
};
var myhtml5Clock = new html5Clock(config);
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
HTML5 时间插件 动画插件 旋转特效 css3 360度旋转 图片3D旋转 jQueryRotate