[JQuery] LightBox 燈箱效果不求人-自己也可動手做

首頁 > JQuery, 網頁設計 > [JQuery] LightBox 燈箱效果不求人-自己也可動手做

[JQuery] LightBox 燈箱效果不求人-自己也可動手做

2010年2月9日瀏覽次數 : 2,920

閱讀評論發表評論

記得之前有發表過一系列的燈箱效果，雖然沒辦法達到自己想要的效果，但是因為人家都寫好了，也不想再重新搞那麼多程式碼，所以很喜歡用 SHADOWBOX 這套 LightBox 外掛，而且在 WP 安裝還蠻方便的，不過有時候我們是希望把重點的圖片打光，那就自己寫個簡單的 JS 就可以囉。

最近剛加入愛瘋一族，所以應應景從 Apple 借了一些圖片當範例囉。

其實這個燈箱效果說穿了並不會很難，他只是在所有的 HTML 結構上蓋了一層 DIV，並且將這個 DIV 設定為半透明屬性，這樣子就可以若隱若現的看到內容物，而在最上面再放一張圖片，這樣子就可以把我們想要表達的重點圖片 HIGH LIGHT 囉，而且你不一定只是用在圖片喔。

先看看執行結果吧。

至於 HTML CSS 跟 JS 檔就在下面囉~~另外就是本來想要燈箱出現的效果是淡入，但是因為動作設定在 MOUSEOVER 與 MOUSEOUT 所以動作很快，然後淡入的透明度就出了點問題，因此暫時把特效拿掉了。

^?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").css("display","none");
		});
		//當所有的資料與事件都準備好以後，將燈箱險是在畫面上
		$(".lightbox").css("display","");
	})
 
 
	//如果滑鼠放在燈箱背景上的時候一樣移除效果
	$(".background").mouseover(function(){
		$(".lightbox").css("display","none");
	});
 });

CSS

^?View Code CSS

@charset "utf-8";
/* CSS Document */
 
body{
	padding:0;
	margin:0;
}
 
.gridarea{
	padding:0;
	margin: 20px auto;
	width:670px;
}
 
.gridarea img , .gridareaimg{
	padding:2px;
	margin:1px;
	border:1px solid black;
}
 
.lightbox{
	width:100%;
	position:absolute;
	padding:0;
	margin:0;
	top:0px;
	left:0px;
}
 
.background{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:#000;
}
 
.images{
	position:absolute;
	margin:0;
	padding:0;
}
 
.gridareaimg{
	position:absolute;
}

HTML

^?View Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>燈箱效果</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="class0209.js"></script>
 
<link href="class0204.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
 
<div class="gridarea">
    <img src="images/1.jpg" width="210" height="126" />
    <img src="images/2.jpg" width="210" height="126" />
    <img src="images/3.jpg" width="210" height="126" />
    <img src="images/4.jpg" width="210" height="126" />
    <img src="images/5.jpg" width="210" height="126" />
    <img src="images/6.jpg" width="210" height="126" />
    <img src="images/7.jpg" width="210" height="126" />
    <img src="images/8.jpg" width="210" height="126" />
    <img src="images/9.jpg" width="210" height="126" />
</div>
<BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />
<div class="lightbox">
<div class="background"></div>
<div class="images"></div>
</div>
 
</body>
</html>