jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件
廢話不多說了,直接給大家貼代碼了。
效果圖如下所示:

簡(jiǎn)潔代碼如下:
<link rel="stylesheet" />
<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>
完整代碼如下:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
<link rel="stylesheet" />
<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="width:500px;margin:10px auto;">
<div id="hoverclock">
</div>
<div><br /><a >Help</a> <a >Demo 1</a> <a >Demo 2</a>
<a >Demo 3</a> <a >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>
- jquery+html5時(shí)鐘特效代碼分享(可設(shè)置鬧鐘并且語(yǔ)音提醒)
- jquery+html5制作超酷的圓盤時(shí)鐘表
- jQuery+css實(shí)現(xiàn)的時(shí)鐘效果(兼容各瀏覽器)
- jquery制作LED 時(shí)鐘特效
- jquery制作圖片時(shí)鐘特效
- jquery模擬LCD 時(shí)鐘的html文件源代碼
- 基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)
- jQuery超酷平面式時(shí)鐘效果代碼分享
- 基于Jquery和CSS3制作數(shù)字時(shí)鐘附源碼下載(CSS3篇)
- jQuery實(shí)現(xiàn)的電子時(shí)鐘效果完整示例
相關(guān)文章
一個(gè)簡(jiǎn)單的jQuery插件制作 學(xué)習(xí)過程及實(shí)例
本文僅供參考,如有不足或錯(cuò)誤,請(qǐng)不吝賜教,這里以一個(gè)彈出層的jQuery插件制作實(shí)例為基礎(chǔ),進(jìn)行插件制作的說明。2010-04-04
jquery鼠標(biāo)滑過提示title具體實(shí)現(xiàn)代碼
這篇文章介紹了jquery鼠標(biāo)滑過提示title具體實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-08-08
jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎(jiǎng)程序
今天小編就為大家分享一篇關(guān)于簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤抽獎(jiǎng)程序,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧2019-03-03
如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長(zhǎng),所以都會(huì)設(shè)置這么一個(gè)按鈕,利用這個(gè)按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過實(shí)例代碼給大家簡(jiǎn)單介紹一下吧2016-12-12
jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery簡(jiǎn)易時(shí)光軸實(shí)現(xiàn)方法,可實(shí)現(xiàn)點(diǎn)擊底部鏈接動(dòng)態(tài)加載內(nèi)容的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-03-03
jQuery實(shí)現(xiàn)的超酷蘋果風(fēng)格圖標(biāo)滑出菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超酷蘋果風(fēng)格圖標(biāo)滑出菜單效果代碼,涉及jQuery基于鼠標(biāo)hover事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常美觀實(shí)用,需要的朋友可以參考下2015-09-09

