jquery实现聚光灯效果的方法

本文实例讲述了框架实现聚光灯效果的方法。分享给大家供大家参考。具体分析如下：

有时网站需要用框架实现一种图片聚光灯特效，当鼠标滑过单组中的单个图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效。其实现原理为首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。这里就来介绍如何用框架实现聚光灯效果

框架实现聚光灯效果图如下所示：

框架代码复制代码代码如下：doctypehtmlhearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery聚光灯插件制作框架图片特效鼠标滑过图片当前图片高亮/title meta name=' description ' content=' jquery聚光灯插件制作框架图片特效当鼠标滑过图片时当前图片高亮显示其余另外的图片变暗//页眉dystyle type=' text/CSS ' * { margin 33600；划水：0;列表样式-:型无；}a，img { border:0} img {垂直对齐：middle}/*灯*/。灯高度：366像素宽度宽度：960像素位置：相对；margin:0 auto}。灯。亚光{ position:absolute绝对值显示：块；飞越：隐藏；}.灯pic1 { top:0left:0宽度宽度：240像素高度：366 px}.灯宽度宽度：480像素宽度：183像素。灯宽度宽度：240像素宽度：183像素。灯宽度宽度：240像素宽度：183像素。灯宽度宽度：240像素宽度：183像素。灯宽度width :240 pxh three :183 px }/style div class=' lamp ' a target=' _ blank ' href='//www .JB 51。net/' class=' sublight pic1 ' img src=' http :图片URL/a a target=' _ blank ' href='//www .JB 51。net/' class='亚光pic2 ' img src=' http :图片URL/a a target=' _ blank ' href='//www .JB 51。net/' class='亚光pic3 ' img src=' http :图片URL/a a target=' _ blank ' href='//www .JB 51。net/' class='亚光pic4 ' img src=' http :图片URL/a a target=' _ blank ' href='//www .JB 51。net/' class='亚光pic5 ' img src=' http :图片URL/a a target=' _ blank ' href='//www .JB 51。net/' class='亚光pic6 ' img src=' http :图片URL '/a/div脚本类型=' text/JavaScript ' src=' http : jquery。js '/script脚本类型=' text/JavaScript '//高亮效果var blockHighLight=(函数(window，$，undefined){ var markers=[]；返回函数(boxCls，itemCls，sizeArr){ var box=$(box cls)；item cls=item cls | |“a”；box.find(itemCls).每个（函数(I){ var self=$(this)；var arr，w，h，markerif(sizeArr！==未定义){ arr=sizeArr[i].split('，')；w=arr[0]；h=arr[1]；}else{ w=self.find('img ').attr('宽度');h=self.find('img ').attr('高度');}标记=$(' div style='光标：指针；top:0left:0位置：绝对；宽度： ' w ' px高度： ' h ' pxfilter:alpha(不透明度=0);opa城市3360 0；背景色： # 000;/div ')；self.append(标记);自我。鼠标悬停在(function(){ for(var I=0；imarkers . lentigi){ 0标记[i].显示()。css({ '不透明度' :'0.2 ','滤镜： '(不透明度=20)' });}标记。hide()；});markers.push(标记);});盒子。鼠标移出(function(){ for(var I=0；imarkers . lentigi){ 0标记[i].css({ '不透明度' :'0 ','滤镜： '(不透明度=0)' });} }) }))(这个，$);blockHighLight(' .灯',//父元素。亚光',//子元素集[ '240,366', //第一张图片的宽高'480,183', //第二张图片的宽高'240,183', //第三张图片的宽高'240,183', //第四张图片的宽高'240,183', //第五张图片的宽高'240,183' //第六张图片的宽高]);/脚本/正文/html

希望本文所述对大家的框架程序设计有所帮助。