Example of background wall spotlight effect implemented by jquery
This article mainly introduces the example of jquery's background wall spotlight effect. For more information, see
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" 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)
Certificate (this).find('img'0000.addclass('active'0000.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
Certificate (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)
Certificate (this0000.find('img'0000.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 background wall spotlight effect
<P> click an image to view the effect. </p>
<! -- Start spotlightWrapper div -->
<Div class = 'spotlightwrapper'>
<! -- Start unordered list -->
<Ul>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Li> <a href = '#'> </a> </li>
<Div class = 'clear'> </div>
</Ul>
<! -- End unordered list -->
</Div>
<! -- End spolightWrapper div -->
</Body>
</Html>