Jquery realizes the background wall spotlight effect example sharing

  • 2020-03-30 02:11:33
  • OfStack

 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>jQuery Background wall spotlight effect code  </title>
 <script type="text/javascript" charset="utf-8" src='/jquery.js'></script>
 <script type="text/javascript" charset="utf-8">
   var spotlight = {
     // the opacity of the "transparent" images - change it if you like
    opacity : 0.2,
    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


   //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);

 <style type="text/css" media="screen">
  body { background:black; color:white; font-family: 'georgia' } 
  .spotlightWrapper ul { 
   list-style-type: none;  
  .spotlightWrapper ul li { 
  .spotlightWrapper ul li a img { 
  .spotlightWrapper ul li a img.active {
   border:4px solid white; 
   left: -4px; 
   top: -4px; 
  .clear { clear:both; } 
 <h3>jQuery Background wall spotlight effect </h3>
    <p> Click on the picture to see the effect </p>
 <!-- start spotlightWrapper div -->
<div class='spotlightWrapper'>
  <!-- start unordered list -->
   <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>
  <!-- end unordered list -->
 <!-- end spolightWrapper div -->

Related articles: