萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現背景牆聚光燈效果示例

jquery實現背景牆聚光燈效果示例

 這篇文章主要介紹了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>  
copyright © 萬盛學電腦網 all rights reserved