首页 > 互联网 > 设计制作 > 网页设计 > 实现jQuery鼠标滑向当前图片高亮显示并且其它图片变灰的方法

实现jQuery鼠标滑向当前图片高亮显示并且其它图片变灰的方法

   来源:学问社    阅读: 1.14W 次
字号:

用手机扫描二维码 在手机上继续观看

手机查看

本文实例讲述了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法。分享给大家供大家参考。具体如下:

实现jQuery鼠标滑向当前图片高亮显示并且其它图片变灰的方法

鼠标滑向当前图片高亮显示,其它图片变灰 这个 网页特效一些商城经常用到比如淘宝,当用户鼠标移到某一个图片时候变亮 周围图片变灰,形成对比增加用户体验

这个jquery特效的原理是:鼠标滑过当前元素,找到他的`同辈元素i,并为它加上opacity_bg类,鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景

核心js代码如下:

$(document)y(function(){ $("ul li")r(function(){ $(this)ings()("i")lass("opacity_bg"); //鼠标滑过当前元素,找到他的同辈元素i,并为它加上opacity_bg类 },function(){ $(this)ings()("i")veClass("opacity_bg"); //鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景 })})

运行效果如下图所示:

代码如下:

jquery聚光灯效果----无效果请刷新鼠标滑向当前图片高亮显示,其它图片变灰

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

动画设计
网页设计
环境设计
美工设计
平面设计
计算机辅助设计
广告设计
室内外设计