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