jquery实现背景墙聚光灯效果示例分享

时间：2021-05-26

复制代码 代码如下:
<!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背景墙聚光灯效果代码 </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,


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' }
.spotlightWrapper ul {
list-style-type: none;
margin:0px;
padding:0px;
}
.spotlightWrapper ul li {
float:left;
position:relative;
}
.spotlightWrapper ul li a img {
width:200px;
position:relative;
border:none;
}
.spotlightWrapper ul li a img.active {
border:4px solid white;
z-index:1;
left: -4px;
top: -4px;
}
.clear { clear:both; }
</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>
<li><a href='#'><img src='images/13.jpg' /></a></li>
<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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章