jQuery 图片聚光灯奇效制作社交图标聚光灯特效-20130719

jQuery 图片聚光灯特效制作社交图标聚光灯特效-20130719
1、效果及功能说明

打造一种图片聚光灯特效，当鼠标滑过单组中的单个社交图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效

2、实现原理

首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。

主要的方法

$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
//定义鼠标触及图片背景颜色其他图片透明度的修改

$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);
//让当前的提示语出现和定义出现的地方

$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);
//当鼠标移开之后，背景颜色的透明度回复正常	

$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);
//让后鼠标离开图片后提示语恢复到原始的地方消失不见

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	
	$("#jquery li").each(function(){
	//定义一个遍历的方法
		$("a strong", this).css("opacity", "0");
		//让鼠标触及到a strong 的样式的透明度为0
	});
	
	$("#jquery li").hover(function(){ 
	//定义一个伪类
		$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
		//当鼠标触碰到 li后停止所有动画，在定义隐藏方法隐藏在图片右上方的提示语
		$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);
		//当鼠标移动到当前的 a strong时停止说有动画，在定义动画效果让提示语出现上离原图上方-10px的地方
	},function(){ 
	//当鼠标离开以后
		$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);
		//停止所有动画，让提示语隐藏起来和时间	
		$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);
		//当鼠标离开当前a strong后让提示语回到 距高-1px隐藏起来全程0.3秒
	});
	
});
</script>
</head>
<body>

	<div id="wrapper">
		<h1>社交图标显示</h1>
		<h3>jQuery</h3>
		<ul class="social" id="jquery">
			<li class="delicious">
				<a href="http://www.17sucai.com/"><strong>Delicious</strong></a>
			</li>
			<li class="digg">
				<a href="http://www.17sucai.com/"><strong>Digg</strong></a>
			</li>
			<li class="facebook">
				<a href="http://www.17sucai.com/"><strong>Facebook</strong></a>
			</li>
			<li class="flickr">
				<a href="http://www.17sucai.com/"><strong>Flickr</strong></a>
			</li>
			<li class="linkedin">
				<a href="http://www.17sucai.com/"><strong>LinkedIn</strong></a>
			</li>
			<li class="reddit">
				<a href="http://www.17sucai.com/"><strong>Reddit</strong></a>
			</li>
			<li class="rss">
				<a href="http://www.17sucai.com/"><strong>RSS</strong></a>
			</li>
			<li class="twitter">
				<a href="http://www.17sucai.com/"><strong>Twitter</strong></a>
			</li>
		</ul><!--social end-->
	</div>
	
</body>
</html>

jQuery 图片聚光灯奇效制作社交图标聚光灯特效-20130719

相关推荐