這篇文章主要介紹了jquery實現背景牆聚光燈效果示例,需要的朋友可以參考下
代碼如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>jQuery背景牆聚光燈效果代碼 </title> <script type="text/javascript" charset="utf-8" src='/jquery.js'></script> <script type="text/javascript" charset="utf-8"> $(window).load(function(){ var spotlight = { // the opacity of the "transparent" images - change it if you like opacity : 0.2, /*the vars bellow are for width and height of the images so we can make the <li> same size */ imgWidth : $('.spotlightWrapper ul li').find('img').width(), imgHeight : $('.spotlightWrapper ul li').find('img').height() }; //set the width and height of the list items same as the images $('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight }); //when mouse over the list item... $('.spotlightWrapper ul li').hover(function(){ //...find the image inside of it and add active class to it and change opacity to 1 (no transparency) $(this).find('img').addClass('active').css({ 'opacity' : 1}); //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array $(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ; //when mouse leave... }, function(){ //... find the image inside of the list item we just left and remove the active class $(this).find('img').removeClass('active'); }); //when mouse leaves the unordered list... $('.spotlightWrapper ul').bind('mouseleave',function(){ //find the images and change the opacity to 1 (fully visible) $(this).find('img').css('opacity', 1); }); }); </script> <style type="text/css" media="screen"> body { background:black; color:white; font-family: 'georgia' } /* not important */ .spotlightWrapper ul { list-style-type: none; /* remove the default style for list items (the circles) */ margin:0px; /* remove default margin */ padding:0px; /* remove default padding */ } .spotlightWrapper ul li { float:left; /* important: left float */ position:relative; /* so we can use top and left positioning */ } .spotlightWrapper ul li a img { width:200px; /* you don't need this, i just rescaled the images they are bigger then i want them to be ' */ position:relative; /* so we can use top and left positioning */ border:none; /* remove the default blue border */ } .spotlightWrapper ul li a img.active { border:4px solid white; /* choose whatever you like */ z-index:1; /* show it on top of the other images (they have z-index 0) */ left: -4px; /* same as border width but negative */ top: -4px; /* same as border width but negative */ } .clear { clear:both; } /* to clear the float after the last item */ </style> </head> <body> <h3>jQuery背景牆聚光燈效果</h3> <p>點擊圖片查看效果</p> <!-- start spotlightWrapper div --> <div class='spotlightWrapper'> <!-- start unordered list --> <ul> <li><a href='#'><img src='images/1.jpg' /></a></li> <li><a href='#'><img src='images/2.jpg' /></a></li> <li><a href='#'><img src='images/3.png' /></a></li> <li><a href='#'><img src='images/4.jpg' /></a></li> <li><a href='#'><img src='images/5.jpg' /></a></li> <li><a href='#'><img src='images/6.png' /></a></li> <li><a href='#'><img src='images/7.jpg' /></a></li> <li><a href='#'><img src='images/9.PNG' /></a></li> <li><a href='#'><img src='images/10.jpg' /></a></li> <li><a href='#'><img src='images/11.png' /></a></li> <li><a href='#'><img src='images/12.png' /></a></li> <li><a href='#'><img src='images/13.jpg' /></a></li> <li><a href='#'><img src='images/14.png' /></a></li> <li><a href='#'><img src='images/15.jpg' /></a></li> <li><a href='#'><img src='images/16.jpg' /></a></li> <div class='clear'></div> </ul> <!-- end unordered list --> </div> <!-- end spolightWrapper div --> </body> </html>