「html / css」カテゴリーアーカイブ

オリジナル・アナログ時計

先ごろ「ブログパーツのアナログ時計が大きすぎるので小さくしたい」という質問があったが、ブログパーツは <script /> で提供されるので、時計というような場合、カスタマイズできることにならない。

無論昔も今も Flash で作成するのがオーソドックスな方法。
最近は javascript でも jQuery を用いればカンタンにできるようにはなった。
それでも、文字盤や針は自分で用意しなければならない。

jquery.Rotate.js を用いる方法もあるが、jQuery 本体があれば、僅か 30 行 1.2kb 程度の javascript と CSS で実現できる。
レンタルの無料ブログで試してみた。

参考にした講座は CSS-TRICKS
ところが、 0 秒になると分針がカクッと移動する。 それでは面白くないので、 ない頭を絞ってトライしたが、存外カンタンであった。

        $(document).ready(function() {
         
              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";

              $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
              }, 1000 );
         
              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";
              
              $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});
              }, 1000 );
        
              setInterval( function() {
              var mins = new Date().getMinutes();
              var seconds = new Date().getSeconds(); // added var seconds
              var mdegree = mins * 6 + (seconds / 10); // added seconds count
              var mrotate = "rotate(" + mdegree + "deg)";
              
              $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});
              }, 1000 );
       }); 

CSS はヘッダーに重ねるために #header の position 値を relative にし、 #clock の position 値は absolute にした。

ヘッダーに重ねたアナログ時計

<input />

onfocus=”this.select()” を加えると、ボックスをクリックしただけで、「選択済み」となって反転される。あとは右クリック「コピー」とか Ctrl + C でコピーできる。
<input /> は「一行テキストボックス」であるので、はみ出す部分は見えないが、コピーする用途には充分。

全文字表示するには複数行の表示ができる <textarea> 〜 </textarea> とすればいい。

しかし wordpress.com では勝手がちがった。

<textarea readonly="readonly" onfocus="this.select()" style="width: 300px;"><a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;●●●ブログ&lt;/a&gt;</textarea>

<div style="border: 1px solid #aaaaaa; padding: 3px; margin-bottom: 10px; width: 450px;">&lt;a href=&quot;http://example.com/&quot; target=&quot;_blank&quot;&gt;●●●ブログ&lt;/a&gt;</div>

と記述しても

<a href="http://example.com/&quot;; target="_blank">●●●ブログ</a>

のように表示される。

結局 "/" が &#038; として出力される。無論、 "/" がなければ、「有効な」 URL でないので、意味がない。
斯くして、そういうことがやりたいなら Pro にアップグレイドして 99 ドルを支払うことになるであろう。

wordpress.com ではセキュティ上の問題もあって「禁止タグ」のような扱いらしい。

フルサイズ・ノンストップ・オート・カルーセル

某所で楽天の http://www.rakuten.ne.jp/gold/mellow/sukuroru.htm が終端でストップするので、エンドレスになるライブラリがないかという記事がありました。

しかし探してはみるが、なかなかないもんなんですね、これが。

でも、アフィリエイトする人には魅力に映るのかもしれませんが、閲覧者には「ウザッタイ」だけなのかもしれません。

とにかくいろんなのがあります。 自動にならないもの、 終端で先頭に戻るもの、 勿論さっと見ただけで動作を細かくチェックした訳ではありません。

  • http://sorgalla.com/projects/jcarousel/
  • http://www.efectorelativo.net/laboratory/noobSlide/
  • http://www.dynamicdrive.com/dynamicindex14/carousel.htm
  • http://billwscott.com/carousel/
  • http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html?lang=fr
  • http://www.twospy.com/galleriffic/index.html
  • http://devthought.com/blog/projects-news/2008/06/barackslideshow-an-elegant-lightweight-slideshow-script/
  • http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
  • http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/
  • http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
  • http://www.serie3.info/s3slider/
  • http://www.intrepidstudios.com/projects/jquery-just-another-carousel/demo.aspx
  • http://www.prototype-ui.com/
  • http://web.enavu.com/tutorials/making-an-infinite-jquery-carousel/
  • http://miedlar.com/dev/carousel
  • http://zendold.lojcomm.com.br/icarousel/
  • http://developer.yahoo.com/yui/carousel/
  • http://www.enova-tech.net/lab/jMyCarousel/

ここではそのキャプチャ画像から最後の jMyCarousel に目を付けました。
そしてサンプルを作って見ました。 (別ウィンドウ)
http://utara.jp/supp/jmycarousel.html

画像は「自由に使える」サイトのものを利用して、 22 枚あるので、モニタ・サイズが 3200 以上でなければ、途切れることはありません。
枚数と幅でモニタ・サイズを切ると、終端が右にある時、一時的に切れますが、数秒以内に先頭がくっつき元通りになります。

Gulim

元々カルーセル機能しかないので、拡大表示には HighSlide を適用させていますが、勿論 LightBox, ThickBox などのライブラリも使えるでしょう。 (サンプルでカーソルがルーペになるもの)

サンプルのソース概略 <head>

<head>
<link rel="stylesheet" type="text/css" href='パス/highslide.css' />
<script type="text/javascript" src="パス/script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="パス/script/jMyCarousel.js"></script>
<script type="text/javascript" src="パス/script/highslide-full.js"></script>
<script type="text/javascript">
//<![CDATA[    
    hs.graphicsDir = 'パス/script/highslide/graphics/';
    window.onload = function() {
        hs.preloadImages(5);
    }
    hs.outlineType = 'rounded-white';
    hs.wrapperClassName = 'wide-border';
//]]>
</script>
<script type="text/javascript">
    $(function() {
        $(".jMyCarousel").jMyCarousel({
            visible: '100%',
            auto: true,
            speed: 1800
        });
    });
</script>
<style type="text/css">
div.jMyCarousel ul li {
    border: 1px solid #fff;
    line-height: 0;
    margin: 20px 10px 0;
    vertical-align: top;
}
</style>
</head>

サンプルのソース概略 <body>

<body>
    <div class="jMyCarousel">
        <ul>
            <li><a href="img/V/2001091102.jpg" class="highslide" onclick="return hs.expand(this)" onkeypress="void(0)"><img src="img/Vr/2001091102-w100-h150.jpg" width="100" height="150" alt="" /></a></li>
            <li><a href="http://www.ubuntulinux.jp/" onkeyup="void(0)" onmouseup="window.open(this.href,'ubuntulinux');return false;" title="Uuntu JAPAN"><img src="img/Vr/2001092402-w100-h150.jpg" width="100" height="150" alt="" /></a></li>
            以下省略
        </ul>
    </div>

イメージにキャプションをとも思ったのですが、js ファイルには <ul><li> の指定になっているので、<li><dl> なども試して見ましたが、失敗に終わりました。 lisence.txt を読んでいないので、js には手を付けていません。 というより、キャプションを付けたいなら、閲覧者側に立って考えると、やはり、アイテムを一時的にストップさせた方がいいのではと考えます。