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);//让后鼠标离开图片后提示语恢复到原始的地方消失不见
<!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 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>