本範例使用Jquery實現影片播放頁面的關燈開燈效果。其中影片顯示使用embed 元素，該元素是html5的元素，所以使用支援html5的瀏覽器效果會更好。 效果預覽網址：http://www.keleyi.com/keleyi/phtml/guandeng/ 完整程式碼： 複製程式碼複製程式碼 代碼如下: 張國榮《千千闕歌》--腳本之家關燈特效 <BR>body {font-family:Arial, Sans-Serif; font-size: 13px; text-align:center; margin:0px; position:relative;} <BR>#container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative; #movie_keleyi_com {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px; position:relative; z-index:102;} <BR>#description { float:102;} <BR>#description { float:102;} <BR>#description { float:102;} <BR>#description { float:102;} <BR>#description { float:102;} ; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;} <BR>#command { position:relative; height:25px; display:block; margin: 25px 0 light0; position:absolute; z-index:101; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb_off.png); <BR>background-repeat:no-repeat; background-repeat; background- position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;} <BR>.lightSwitcher:hover {text-decoration:underline;} <BR>#shadow {background-image:url(http ://www.keleyi.com/keleyi/phtml/guandeng/shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;} <BR>.turnedOff { color:#ffff00; background-image:url(http://www.keleyi.com/keleyi/phtml/guandeng/light_bulb.png);} <BR>#clickHere {position:absolute; top: -25px; left: 130px;} <BR> <BR>$(document).ready(function () { <BR>$("#shadow").css("height", $( document).height()).hide(); <BR>$(".lightSwitcher").click(function () { <BR>$("#shadow").toggle(); <BR>if ($ ("#shadow").is(":hidden")) <BR>$(this).html("關燈").removeClass("turnedOff"); <BR>else <BR>$(this). html("開燈").addClass("turnedOff"); <BR>}); <BR>}); <BR> 張國榮《千千闕歌》 柯樂義關燈特效 關燈 p> 可改變大小DIV層 jquery使用ColorBox彈出圖片群組瀏覽圖層 jQuery實作可拖曳的浮動層(版本2) jquery「收藏本頁」代碼 柯樂義高級彈出式選單（可以有三級選單） 關燈特效原文
