jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件

更新時(shí)間：2016年01月08日 16:07:53 作者：roucheng

這篇文章主要介紹了jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件附源碼下載的相關(guān)資料,需要的朋友可以參考下

廢話不多說(shuō)了，直接給大家貼代碼了。

效果圖如下所示：

簡(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>

您可能感興趣的文章:

相關(guān)文章

jquery插件制作手風(fēng)琴Panel效果實(shí)現(xiàn)
我們今天要做的是手風(fēng)琴panel，jquery.ui里面有個(gè)叫做accordtion的插件，我們要實(shí)現(xiàn)的效果和他一樣
2012-08-08
JQuery中extend的用法實(shí)例分析
這篇文章主要介紹了JQuery中extend的用法,實(shí)例分析了extend的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下
2015-02-02
jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單文字提示效果的方法,以完整實(shí)例形式分析了jQuery插件jquery-1.2.6.pack.js實(shí)現(xiàn)文字提示效果的相關(guān)技巧,并提供了jquery-1.2.6.pack.js的本站下載地址,需要的朋友可以參考下
2015-12-12
JavaScript和JQuery實(shí)用代碼片段（一）
JavaScript和JQuery實(shí)用代碼片段，喜歡學(xué)習(xí)jquery的朋友可以參考下。
2010-04-04
jQuery實(shí)現(xiàn)呼吸輪播圖
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)呼吸輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
jquery validate表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了jquery validate表單驗(yàn)證插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
jQuery模擬實(shí)現(xiàn)的select點(diǎn)擊選擇效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬實(shí)現(xiàn)的select點(diǎn)擊選擇效果,涉及jQuery響應(yīng)鼠標(biāo)點(diǎn)擊動(dòng)態(tài)修改頁(yè)面元素樣式的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下
2016-11-11
jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)div拖拽效果的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素樣式變換的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-02-02
jQuery zTree樹插件動(dòng)態(tài)加載實(shí)例代碼
這篇文章主要介紹了jQuery zTree樹插件動(dòng)態(tài)加載效果的實(shí)例代碼,需要的朋友可以參考下
2017-05-05
jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)左右滑動(dòng)菜單效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08