学习|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、效果图
[img]http://dl2.iteye.com/upload/attachment/0087/1823/6c68dc25-113a-3f9c-bb93-6bbd93489b16.jpg[/img]
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
社交图标显示
jQuery
