Example of background wall spotlight effect implemented by jquery

Source: Internet
Author: User

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>

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.