This article mainly introduces jquery implementation background Wall Spotlight effect example, need friends can refer to the following
The code is as follows: <! 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 background Wall Spotlight Effect code </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" I Mages-change it if like opacity:0.2, /*the VARs bellow are for width and height The images so we can make The <li> same size */ ImgWidth: $ ('. Spotlightwrappe R ul Li '). FIND (' img '). Width (), imgheight: $ ('. Spotlightwrapper ul Li '). FIND (' img '). Height () & nbsp }; //set the width and height of the list items same asThe 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 T He spotlight array $ (a) 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 is 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= "screens" > body {background:black; font-family: ' Georgia '}/* not important/ Spotlightwrapper ul { list-style-type:none; * RE Move 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 F Loat * position:relative; * So we can use the top and left positioning/ } Spotlightwrapper ul li a img { width:200p X /* You don ' t need this, I just rescaled the images they are bigger then I want them to be ' * * * * &NBSp;position:relative; * So we can use the top and left positioning */ border:none; /* Remove the default blue border/ } Spotlightwrapper ul Li a img.active { &NBSP;BORDER:4PX solid White /* Choose whatever you like * * z-index:1; * Show it to the 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 on the last item * / </style> </head> <body> <h3>jquery background Wall Spotlight effect </h3> <p> Click picture View effect </p> <!--start spotlightwrapper div--> <div class= ' spotlightwrapper ' > <!-- Start unordered list--> <ul> <li><a href= ' # ' ><img src= ' images/1.jpg '/>& lt;/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 ' # ' ><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> &NBSP;<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&G T Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
