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 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀