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

时间:2024-10-26 23:34:30 jQuery 我要投稿
  • 相关推荐

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

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

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

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

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

  核心js代码如下:

  $(document).ready(function(){ $("ul li").hover(function(){ $(this).siblings().find("i").addClass("opacity_bg"); //鼠标滑过当前元素,找到他的同辈元素i,并为它加上opacity_bg类 },function(){ $(this).siblings().find("i").removeClass("opacity_bg"); //鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景 })})

  运行效果如下图所示:

  代码如下:

  

jquery聚光灯效果----无效果请刷新

鼠标滑向当前图片高亮显示,其它图片变灰

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

【实现jQuery鼠标滑向当前图片高亮显示并且其它图片变灰的方法】相关文章:

关于jQuery实现高亮显示的方法介绍08-20

关于jquery简单图片切换显示效果实现方法介绍10-01

常用的手机产品展示图片修方法07-15

实现鼠标画图的Java程序06-22

图片的使用技巧07-12

Win7系统批量图片重命名方法01-04

J2ME插值算法如何实现图片的放大缩小10-27

CAD如何插入图片05-03

网站图片优化的技巧08-22

冬至qq祝福图片06-17