中尉
<!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>突出显示 by 25175</title>
<script type="text/javascript" charset="utf-8" src="index_files/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)
$(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
$(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="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>25175</h3>
<h5>ww.25175.com</h5>
<h5>How to use it? Just hover over the images and you will see the effect.</h5>
<!-- start spotlightWrapper div -->
<div class="spotlightWrapper">
<!-- start unordered list -->
<ul>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/1.jpg"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/2.jpg"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/3.png"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" class="" src="index_files/4.jpg"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/5.jpg"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/6.png"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img class="" style="opacity: 1;" src="index_files/7.jpg"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/9.PNG"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/10.jpg"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/11.png"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/12.png"></a></li>
<li style="width: 200px; height: 163px;"><a href="#"><img style="opacity: 1;" src="index_files/13.jpg"></a></li>
<div class="clear"></div>
</ul>
<!-- end unordered list -->
</div>
<!-- end spolightWrapper div -->
</body></html>
购买记录
新兵
