本文實例講述了jquery實現聚光燈效果的方法。分享給大家供大家參考。具體分析如下： 有時網站需要用jquery實現一種圖片聚光燈特效，當滑鼠滑過單組中的單一圖示時，當前高亮，其它圖示變暗的這種類似圖片聚光燈特效。其實現原理為首先讓滑鼠觸及當前圖片後，讓其他圖片全部透明化，然後顯示出當前的提示語，當滑鼠移開以後隱藏當前的提示語，讓所有的背景顏色的透明度變回正常。這裡就來介紹如何用jquery達到聚光燈效果 jquery實現聚光燈效果圖如下： jquery代碼 複製程式碼 程式碼如下: jquery聚光灯插件制作jquery图片特效鼠标滑过图片当前图片高亮 <br> *{margin:0;padding:0;list-style-type:none;}<br> a,img{border:0;}<br> img{vertical-align:middle}<br> /* lamp */<br> .lamp{height:366px;width:960px;position:relative;margin:0 auto;}<br> .lamp .sublight{position:absolute;display:block;overflow:hidden;}<br> .lamp .pic1{top:0;left:0;width:240px;height:366px;}<br> .lamp .pic2{top:0;left:240px;width:480px;height:183px;}<br> .lamp .pic3{top:0;left:720px;width:240px;height:183px;}<br> .lamp .pic4{top:183px;left:240px;width:240px;height:183px;}<br> .lamp .pic5{top:183px;left:480px;width:240px;height:183px;}<br> .lamp .pic6{top:183px;left:720px;width:240px;height:183px;}<br> <br> // 高亮效果<br> var blockHighLight = (function(window, $, undefined){<br> var markers = [];<br> return function(boxCls, itemCls, sizeArr){<br> var box = $(boxCls);<br> itemCls = itemCls || "a";<br> box.find(itemCls).each(function(i){<br> var self = $(this);<br> var arr,w,h,marker;<br> if(sizeArr !== undefined){<br> arr = sizeArr[i].split(",");<br> w = arr[0];<br> h = arr[1];<br> }else{<br> w = self.find("img").attr("width");<br> h = self.find("img").attr("height");<br> }<br> marker = $('<div style="cursor:pointer;top:0;left:0;position:absolute;width:'+w+'px;height:'+h+'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');<br> self.append(marker);<br> self.mouseover(function(){<br> for(var i=0; i<markers.length i></markers.length> ,中使用).show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"}); }<br> marker.hide();<br> }); <br> markers.push(marker);<br> });<br> box.mouseout(function(){<br> for(var i=0; i<markers.length i></markers.length> markers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});<br> }<br> })<br> }<br> })(this, $);<br> blockHighLight(<br> ".lamp", //父元素<br> ".sublight", //子元素集<br> [<br> '240,366', //第一張圖片的寬高<br> '480,183', //第二張圖片的寬高<br> '240,183', //第三張圖片的寬高<br> '240,183', //第四張圖片的寬高<br> '240,183', //第五張圖片的寬高<br> '240,183' //第六張圖片的寬高<br> ]<br> ); <br> <br> </div>
