jquery实现聚光灯效果的方法.pdfVIP

这篇文章主要介绍了 jquery 实现聚光灯效果的方法 ,可实现鼠标滑过图片时显示当前图 片高亮 ,其他图片变暗的聚光灯效果 ,非常具有实用价值 ,需要的朋友可以参考下 本文实例讲述了 jquery 实现聚光灯效果的方法。分享给大家供大家参考。具体分析如 下： 有时网站需要用 jquery 实现一种图片聚光灯特效，当鼠标滑过单组中的单个图标时， 当前高亮， 其它图标变暗的这种类似图片聚光灯特效。 其实现原理为首先先让鼠标触及到当 前图片后， 让其他图片全部透明化， 然后显示出当前的提示语， 当鼠标移开以后隐藏当前的 提示语，让所有的背景颜色的透明度变回正常。这里就来介绍如何用 jquery 实现聚光灯效 果 jquery 实现聚光灯效果图如下所示： jquery 实现聚光灯效果的方法 jquery 代码 代码如下 : lt;!DOCTYPEgt; lt;htmlgt; lt;headgt; lt;meta http-equiv=Content-Type content=text/html; charset=utf-8 /gt; lt;titlegt;jquery 聚光灯插件制作 jquery 图片特效鼠标滑过图片当前图片高亮 lt;/titlegt; lt;meta name=description content=jquery 聚光灯插件制作 jquery 图片特效当鼠标滑过 图片时当前图片高亮显示其余另外的图片变暗。 /gt; lt;/headgt; lt;bodygt; lt;style type=text/cssgt; *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} img{vertical-align:middle} /* lamp */ .lamp{height:366px;width:960px;position:relative;margin:0 auto;} .lamp .sublight{position:absolute;display:block;overflow:hidden;} .lamp .pic1{top:0;left:0;width:240px;height:366px;} .lamp .pic2{top:0;left:240px;width:480px;height:183px;} .lamp .pic3{top:0;left:720px;width:240px;height:183px;} .lamp .pic4{top:183px;left:240px;width:240px;height:183px;} .lamp .pic5{top:183px;left:480px;width:240px;height:183px;} .lamp .pic6{top:183px;left:720px;width:240px;height:183px;} lt;/stylegt; lt;div class=lampgt; lt;a target=_blank href= class=sublight pic1gt;lt;img src= 图 片 URL/gt;lt;/agt; lt;a target=_blank href= class=sublight pic2gt;lt;img src= 图 片 URL/gt;lt;/agt; lt;a target=_blank