jQuery背景墙聚光灯效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery背景墙聚光灯效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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='js/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 &lt;li&gt; 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>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>

附件:下载该文件资源,减少时间成本(增值服务)