元々は、CSS3Clock からいただいたものですが、そこで紹介されているコードの効率が悪く、実際には使いづらいものだったので改良しました。( そもそも、IE 対応になっていなかった ) 元の画像サイズが大きいので、CSS 部分で定比率で縮小すると小さくして使えるようにしました。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <style type="text/css"> #clock { position: relative; width: 200px; height: 200px; background-image: url(http://winofsql.jp/image/clockface.jpg); background-size:contain; list-style: none; background-repeat:no-repeat; display:none; } #sec, #min, #hour { position: absolute; width: 10px; height: 200px; top: 0px; left: 95px; background-size:contain; } #sec { background-image: url(http://winofsql.jp/image/sechand.png); z-index: 3; } #min { background-image: url(http://winofsql.jp/image/minhand.png); z-index: 2; } #hour { background-image: url(http://winofsql.jp/image/hourhand.png); z-index: 1; } </style> <script type="text/javascript"> function set_time() { var hours = new Date().getHours(); var mins = new Date().getMinutes(); var seconds = new Date().getSeconds(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "transform" : hrotate}); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "transform" : mrotate}); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)"; $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "transform" : srotate}); } $(function() { set_time(); $("#clock").show(); setInterval( function() {set_time();}, 1000 ); }); </script> <ul id="clock"> <li id="hour"></li> <li id="min"></li> <li id="sec"></li> </ul>
関連する記事 jQuery のアナログ時計( 2個 )
|
【jQueryの最新記事】
- clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で DIV の中の DIV を縦横中央に配置する
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )