Image Sprites + jQuery 實作遮罩效果

Image Sprites + jQuery

Image Sprites + jQuery 實作遮罩效果。

CSS Image Sprites

利用CSS Image Sprites可對圖片做某區塊的選取。目的是減少圖檔的http連線次數,例如選單列的做法,一般為預先用軟體切割成一個個的單圖來做成按鈕,好處是製作網頁時較為方便,直接將放置在所需的位置即可,缺點是如果有許多圖檔,就必須用到許多連線,如果用CSS Image Sprites則只要一次連線將圖檔傳回,再對它做區塊分割即可。不過實際上可以增加多少網頁呈現的速度就要真的去測才知道,我用YSlow去測的結果,它是建議我去用CSS Image Sprites來減少http的連線次數。

這個Extending CSS Spriting可以看到實際製作的方法。需要用到clip屬性

使用jQuery實作遮罩效果

看到這個功能,加上最近在玩jQuery,就想到能不能做成依滑鼠座標來顯示某區塊的遮罩效果。

Javascript

<script>
$(document).ready(function(e){
$('.image-area').mousemove(function(event) {
var l = event.pageX - 100;
var r = event.pageX;
var t = event.pageY - 100;
var b = event.pageY;

$('.transparent_png').css({"position":"absolute",
"clip": "rect("+t+"px,"+r+"px,"+b+"px,"+l+"px)"});
});
});
</script>

CSS

<style>
.image-area {
width:400px;
height:300px;
top:0px;
left:0px;
}
</style>

HTML

<div class="image-area">
<img class="transparent_png" src="images/css_sprites.jpg" width="400" height="300" />
</div>

下載範例:css_sprite.rar
本文網址:http://blog.tonycube.com/2010/04/cssimage-sprites-jquery.html
Tony Blog 撰寫,轉載時請註明出處及文章連結,謝謝 😀

我要留言

留言小提醒:
1.回覆時間通常在晚上,如果太忙可能要等幾天。
2.請先瀏覽一下其他人的留言,也許有人問過同樣的問題。
3.程式碼請先將它編碼後再貼上。(線上編碼:http://bit.ly/1DL6yog)
4.文字請加上標點符號及斷行,難以閱讀者恕難回覆。
5.感謝您的留言,您的問題也可能幫助到其他有相同問題的人。