複製程式碼 程式碼如下: "http://www.w3.org/TR/html4/strict.dtd"> jQuery背景墙聚光灯效果代码 <br> $(window).load(function(){<br> var spotlight = {<br> // the opacity of the "transparent" images - change it if you like<br> opacity : 0.2,<p> /*下方的變數用於影像的寬度和高度，因此我們可以讓<br> </p> <li>;相同大小*/<br> imgWidth : $('.spotlightWrapper ul potlightWrapper ul. ').width(), <br> imgHeight : $('.spotlightWrapper ul li').find('img' ).height() <br><br> 項目的寬度和高度與圖片相同<br> $('.spotlightWrapper ul li').css({ 'width' : Spotlight.imgWidth, 'height' : Spotlight.imgHeight } 當滑鼠停留在清單項目上時...<br> $('.spotlightWrapper ul li').hover( function(){<br><br> //...找到其中的圖像並添加活動類別並將不透明度改為1（無透明度）<br> $(this).find('img') .addClass('active').css({ 'opacity' : 1});<br><br> //取得其他清單項目並將其中影像的不透明度改為我們在聚光燈下設定的不透明度array <br> $(this).siblings('li').find('img').css( {'opacity' : Spotlight.opacity}) ;<br><br> //當滑鼠離開時... <br> }, function(){<br><br> }, function(){<br><br> }, function(){<br><br> }的清單項目內的影像並刪除活動類別<br> $(this).find('img') .removeClass('active');<br><br> });<br><br><br> });<br><br><br> });<br><br> 滑鼠離開無序列表時...<br> $('.spotlightWrapper ul').bind('mouseleave ',function(){<br> //查找影像並將不透明度改為1（完全可見）<br> $(this).find('img').css('opacity', 1);<br> });<br><br> type="text/css" media="screen"><br> body { 背景:黑色;顏色：白色；font-family: 'georgia' } /* */<br> .spotlightWrapper不重要 ul { <br> list-style-type: none; /* 刪除清單項目的預設樣式（圓圈） */ <br> margin:0px; /* 刪除預設邊距*/<br> padding:0px; /* 刪除預設內邊距*/<br> }<br> .spotlightWrapper ul li { <br> float:left; /* 重要：左浮動*/<br> position:relative; <br> }<br> .spotlightWrapper ul li a img { <br> width:200px; /* 你不需要這個，我只是重新縮放了圖像，它們比我想要的更大' */<br> */<br> :relative; /* 所以我們可以使用頂部和左側定位*/<br> border:none; /* 刪除預設的藍色邊框*/<br> }<br> .spotlightWrapper ul li a img.active {<br> border:4px Solid White; /* 選擇你喜歡的*/ z-index:1; /* 將其顯示在其他圖像之上（它們的z-index 0） */ left: -4px; /* 與邊框寬度相同但為負數*/ top: -4px; /* 與邊框寬度相同，但為負數*/ } .clear {clear:🎜> } .clear {clear:/* 清除最後一項後的浮動*/<br> <br><br><br> <h3>jQuery 牆背景聚光燈效果 h3><br> p>點擊圖片看效果<br> <!--啟動spotlightWrapper div --><br><div class="spotlightWrapper"> <br> < ;!-- 開始無序列表--><br> <ul> <br> <li><a href="#"><img src="images/1.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" > </a></li> <br> <li> <a href="#"><img src="images/2.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a> li><br> </li> <li><a href="#"><img src="images/3.%20png" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> <li href="#"><img src="images/4.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></li> <br> <li><a href="#%20"><img src="images/5.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> <li><a href="#"><img src="images/6.png" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> <li> <a href="#"><img src="images/7.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a> li><br> </li> <li> <a href="#"><img src="images/9.PNG" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a>< ;/li><br> </li> <li><a href="#%20"><img src="images/10.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> < ;li><a href="#"><img src="images/11.png" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a><br> <li><a href="#"><img src="images/12.png" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> <li> <a href="#"><img src="images/13.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a> </li> <br> <li><a href="#"><img src="images/%2014.png%20" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> <li> <a href="#"><img src="images/15.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a>> ;</li> <br> <li><a href="#"><img src="images/16.jpg" alt="jquery實現背景牆聚光燈效果範例分享_jquery" ></a></li> <br> <div class="clear"></div> <br> </ul> <br> <!--結束無序列表--><br> </div> <br> <!-- 結束spolightWrapper div --> </h3> <p><br></p> </li> </div>
