[JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]

首頁 > JQuery, 網頁設計 > [JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]

[JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]

2010年2月11日瀏覽次數 : 12,245

閱讀評論發表評論

昨天製作了燈箱效果，不過因為本來在製作動畫上有點問題，因此就暫時只使用開關的方式，造成眼睛有點給他閃，所以今天修正了 fadeIn 的特效，讓整個效果看起來更順暢。

據說 iPad 是吃了類固醇的 iPhone ，不過不管他吃了甚麼，我都要吃了他

這篇文章你必須要先參考前篇 [JQuery] LightBox 燈箱效果不求人-自己也可動手做本來想考慮想要加個動畫，但是不管怎麼做，他的透明度就會消失，後來經過男丁格爾的指教才知道本來只寫了 STOP() 是不可以的，透明度只要做了幾次就整個消失了，經過修改之後，改為 .stop(false, true) 就搞定了。

如此效果做在網頁上，當滑鼠移動到特定圖片內，很難不引起讀者的注意，有沒有很像舞台上明星要出場的感覺呢，把周邊不重要的角色的光彩都奪走，剩下重點角色，改天在把它套用到網站上。

由於是延續之前的檔案，在這邊就不再重複貼資料了，僅提供 JS 檔案供參考，有需要的朋友請參考前篇。

JS CODE

^?View Code JAVASCRIPT

/**
 * @author ausir
 */
 
 $().ready(function(){
 	//將燈箱區域隱藏起來-不使用任何動畫
	$(".lightbox").css("display","none");
	//將燈箱的背景亮度調到 0.8 ALPHA
	$(".background").fadeTo(0,0.8);
 
 
	//當九宮格內的圖片觸發滑鼠移入的時候
	$(".gridarea img").mouseover(function(){
		//將燈箱的高度寬度設定與文件的高度寬度相同
		$(".lightbox").css({
			height: $(document).height() + "px",
			width: $(document).width() + "px"
		});
		//將燈箱裡的圖片都先移除，做初始化動作
		$(".lightbox img").remove();
		//取得觸發者圖片的座標
		$position = $(this).offset();
		//將觸發者圖片 COPY 一份丟到燈箱的 IMAGES 區域
		$(".images").append($(this).clone());
		//將燈箱圖片給予相同的 CSS 效果，並且設定座標位置與來源相同(重疊在一起的意思)
		$(".images img").addClass("gridareaimg").css({
			top: $position.top + "px",
			left: $position.left + "px"
		}).mouseout(function(){
			//當滑鼠離開燈箱圖片的時候，把燈相關閉 -不使用任何動畫
			$(".lightbox").stop(false, true).css("display","none");
		});
		//當所有的資料與事件都準備好以後，將燈箱險是在畫面上
		$(".lightbox").stop(false, true).fadeIn("slow");
	})
 
 
	//如果滑鼠放在燈箱背景上的時候一樣移除效果
	$(".background").mouseover(function(){
		$(".lightbox").stop(false, true).css("display","none");
	});
 });