CODE-用CSS實現圖檔裁切效果

    <style type="text/css">

    .clsDigit 

    {

        overflow: hidden;

        padding: 0px;

        width: 15px;

    }

    </style>

    <script src="jquery-1.2.6.js" type="text/javascript"></script>

    <script type="text/javascript">

        function dispNum(num) {

            var tbl = $("<table cellspacing='0' cellpadding='0'><tr></tr></table>");

            var tr = tbl.find("tr");

            var s = num.toString();

            for (var i = 0; i < s.length; i++) {

                var d = parseInt(s.substr(i, 1));

                if (d == 0) d = 9; else d--;

                tr.append(

                    "<td><div class='clsDigit'>" + 

                    "<img src='set16.gif' style='margin-left:" +

                    (-15 * d).toString() + "px' /></div></td>");

            }

            return tbl;

        }

        $(function() {

            $("#dvDisp").append(dispNum("0223939889"));

        });

    </script>

# e said on 22 December, 2008 06:22 PM

水.....

# Will 保哥 said on 23 December, 2008 08:12 AM

用 CSS 的 clip 屬性也行。

msdn.microsoft.com/.../ms530748(VS.85).aspx

# Jeffrey said on 23 December, 2008 02:45 PM

to 保哥，當初有Survey過，要用clip得將position設定absolute，我不太愛這點限制(只是直覺上不喜歡多一條限制可能會衍生副作用，也說不出個所以然來)。剛才認真試了一下，在某些瀏覽器上設定position:absolute後，排版還真的會有點不同。例如: <span>TEXT and <img src="..." style="position:absolute" /></span>，當span也變成postion:absolute後，TEXT與<img>會變成像<div>一樣上下排列。(但只有Chrome/Safari會異常)

# 生魚片 said on 25 December, 2008 07:49 AM

我常用的密碼竟然被公布了....ＸＤ

# mj said on 14 January, 2009 07:07 PM

看到比較神奇的做法是在youtube上看到的，不是youtube的影片，而是youtube的大大小小icon的表示法。

所有的icon集合到同一張gif上，使用上是透過img標籤，src則是一張1px的transparent的圖片，接著透過css控制background的x,y軸，圖片大小，做出來的效果基本上跟本文一樣。

後來手癢癢繼續玩其他效果，例如動畫....就是x軸一直捲的那款。ff3下面ok，ie6下面也ok...只不過這時候打開http watch，刺激的來了......ie6只要一變更background的css屬性，他xx的就會重新載入一次圖檔，好像同一張圖只要一捲動就會變成不一樣似的....最後只好回到clip的世界了...clip只要控制top跟left再簡單的去計算出遮罩大小即可

# jack said on 05 September, 2009 01:21 AM

thank you

你的看法呢?

標題 (必要的) 

姓名 (必要的) 

你的URL (選擇性的)

意見 (必要的) 

Remember Me?

(提醒: 因快取機制，您的留言幾分鐘後才會顯示在網站，請耐心稍候)

CAPTCHA / 驗證碼 :

5 + 3 =

搜尋