jQuery CSS3相結(jié)合實(shí)現(xiàn)時(shí)鐘插件
廢話不多說(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>
- jquery+html5時(shí)鐘特效代碼分享(可設(shè)置鬧鐘并且語(yǔ)音提醒)
- jquery+html5制作超酷的圓盤(pán)時(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í)過(guò)程及實(shí)例
本文僅供參考,如有不足或錯(cuò)誤,請(qǐng)不吝賜教,這里以一個(gè)彈出層的jQuery插件制作實(shí)例為基礎(chǔ),進(jìn)行插件制作的說(shuō)明。2010-04-04jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼
這篇文章介紹了jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-08-08jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery判斷checkbox是否選中及改變checkbox狀態(tài)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)程序
今天小編就為大家分享一篇關(guān)于簡(jiǎn)單易擴(kuò)展可控性強(qiáng)的Jquery轉(zhuǎn)盤(pán)抽獎(jiǎng)程序,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-03-03如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長(zhǎng),所以都會(huì)設(shè)置這么一個(gè)按鈕,利用這個(gè)按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過(guò)實(shí)例代碼給大家簡(jiǎn)單介紹一下吧2016-12-12jQuery簡(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-03jQuery實(shí)現(xiàn)的超酷蘋(píng)果風(fēng)格圖標(biāo)滑出菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的超酷蘋(píng)果風(fēng)格圖標(biāo)滑出菜單效果代碼,涉及jQuery基于鼠標(biāo)hover事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,非常美觀實(shí)用,需要的朋友可以參考下2015-09-09