.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>
