复制代码 代码如下: BR> "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> /*the vars bellow are for width and height of the images so we can make <BR> the <li> same size */<BR> imgWidth : $('.spotlightWrapper ul li').find('img').width(), <BR> imgHeight : $('.spotlightWrapper ul li').find('img').height() <br><br> };<br><br> //set the width and height of the list items same as the images<BR> $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });<br><br> //when mouse over the list item...<BR> $('.spotlightWrapper ul li').hover(function(){<br><br> //...find the image inside of it and add active class to it and change opacity to 1 (no transparency)<BR> $(this).find('img').addClass('active').css({ 'opacity' : 1});<br><br> //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array <BR> $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;<br><br> //when mouse leave...<BR> }, function(){<br><br> //... find the image inside of the list item we just left and remove the active class<BR> $(this).find('img').removeClass('active');<br><br> });<br><br> //when mouse leaves the unordered list...<BR> $('.spotlightWrapper ul').bind('mouseleave',function(){<BR> //find the images and change the opacity to 1 (fully visible)<BR> $(this).find('img').css('opacity', 1);<BR> });<br><br> });<BR> <BR> body { background:black; color:white; font-family: 'georgia' } /* not important */<BR> .spotlightWrapper ul { <BR> list-style-type: none; /* remove the default style for list items (the circles) */ <BR> margin:0px; /* remove default margin */<BR> padding:0px; /* remove default padding */<BR> }<BR> .spotlightWrapper ul li { <BR> float:left; /* important: left float */<BR> position:relative; /* so we can use top and left positioning */<BR> }<BR> .spotlightWrapper ul li a img { <BR> width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */<BR> position:relative; /* so we can use top and left positioning */<BR> border:none; /* remove the default blue border */<BR> }<BR> .spotlightWrapper ul li a img.active {<BR> border:4px solid white; /* choose whatever you like */<BR> z-index:1; /* show it on top of the other images (they have z-index 0) */<BR> left: -4px; /* same as border width but negative */<BR> top: -4px; /* same as border width but negative */<BR> }<BR> .clear { clear:both; } /* to clear the float after the last item */<BR> jQuery背景墙聚光灯效果 点击图片查看效果
