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

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

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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

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类景
 })
})

登录后复制

运行效果如下图所示：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(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类景
    })
  })
</script>
<style type="text/css">
 ul{margin:0 auto;padding:0;width:810px;font-size:0;zoom:1;}
 ul:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
 ul li{list-style-type:none;float:left;width:190px;height:200px;margin-right:1px;margin-bottom:1px;text-align:center;display:table;position:relative;}
 ul li a{display:table-cell;vertical-align:middle;*display: block;*font-size: 175p;*font-family:Arial;text-align:center;}
 img{border:none; vertical-align:middle;width:190px;height:200px;}
 i{display:block;width:100%;height:100%;position:absolute;left:0;top:0;}
 .opacity_bg{background:#000;opacity:0.4;}
 h1,h4{margin:10px auto;width:810px;color:#FF0C8A;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
</style>
</head>
<body>
 <h1 id="jquery聚光灯效果-无效果请刷新">jquery聚光灯效果----无效果请刷新</h1>
 <h4 id="鼠标滑向当前图片高亮显示-其它图片变灰">鼠标滑向当前图片高亮显示，其它图片变灰</h4>
 <ul>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120913/1-120913133035250.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120829/1-120R9101014R2.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120830/1-120S01F5505H.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghw/default1.png"  data-src="images/120913/1-120913133035250.jpg"  class="lazy" / alt="jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法_jquery" ></a><i class="this_bg"></i></li>
 </ul>
</body>
</html>

登录后复制

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7564

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

100

显示更多

Related knowledge

Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧 Feb 29, 2024 pm 03:20 PM

本文将介绍如何在Win11系统中关闭鼠标移动任务栏图标时显示的缩略图功能。这一功能在默认情况下是开启的，当用户将鼠标指针悬停在任务栏上的应用程序图标上时，会显示该应用程序的当前窗口缩略图。然而，有些用户可能觉得这个功能不太实用或者会干扰到他们的使用体验，因此想要关闭它。任务栏缩略图可能很有趣，但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率，您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源，因此，如果您一直在寻找一种提高资源效率的方法，我们将向您展示如何禁用它。不过

小红书发布自动保存图片怎么解决？发布自动保存图片在哪里？ Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展，小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题，这让他们感到十分困扰。那么，如何解决这个问题呢？一、小红书发布自动保存图片怎么解决？1.清除缓存首先，我们可以尝试清除小红书的缓存数据。步骤如下：（1）打开小红书，点击右下角的“我的”按钮；（2）在个人中心页面，找到“设置”并点击；（3）向下滚动，找到“清除缓存”选项，点击确认。清除缓存后，重新进入小红书，尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

抖音评论里怎么发图片？评论区图片入口在哪里？ Mar 21, 2024 pm 09:12 PM

随着抖音短视频的火爆，用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片，以更好地表达自己的观点或情感。那么，抖音评论里怎么发图片呢？本文将为你详细解答这个问题，并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片？1.打开抖音：首先，你需要打开抖音APP，并登录你的账号。2.找到评论区：在浏览或发布短视频时，找到想要评论的地方，点击“评论”按钮。3.输入评论内容：在评论区输入你的评论内容。4.选择发送图片：在输入评论内容的界面，你会看到一个“图片”按钮或者“+”号按钮，点

雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架，套装价 1549 元 Jul 19, 2024 am 04:17 AM

本站7月12日消息，雷蛇今日宣布推出雷蛇|宝可梦耿鬼款无线鼠标、鼠标垫。其单品定价分别为1299元和299元，包含两款产品的套装价则为1549元。这并非雷蛇首次推出耿鬼联名的外设产品，2023年雷蛇就推出过耿鬼款的八岐大蛇V2游戏鼠标。此次推出两款新品整体均采用与鬼斯、鬼斯通、耿鬼家族外观类似的深紫色底色，印有这三只宝可梦和精灵球的线条轮廓，中间则为耿鬼这一经典幽灵属性宝可梦的彩色大图。本站发现，雷蛇|宝可梦耿鬼款无线鼠标基于此前发布的毒蝰V3专业版打造。其整体重量为55g，搭载雷蛇第二代FOC

惠普推出 Professor 1 三模轻音鼠标：4000DPI、蓝影 RAW3220，首发价 99 元 Apr 01, 2024 am 09:11 AM

本站3月31日消息，惠普近日在京东上架了一款Professor1三模蓝牙鼠标，可选黑白奶茶色，首发价99元，需要支付10元定金。据介绍，这款鼠标重量106克，采用人体工程学设计，尺寸为127.02x79.59x51.15mm，可选七档4000DPI，搭载蓝影RAW3220传感器，使用650毫安时电池，号称一次充电续航可以使用2个月。本站附鼠标参数信息如下：

在 iPhone 上使图片更清晰的 6 种方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时，您可能会遇到一些问题，这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步，可以让您快速拍照，但相机在某些情况下可能会错误地对焦错误的拍摄对象，从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度，以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

ppt怎么让图片一张一张出来 Mar 25, 2024 pm 04:00 PM

在PowerPoint中，让图片逐一显示是一种常用的技巧，可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤，包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外，还提供了高级设置和调整，例如使用触发器、调整动画速度和顺序，以及预览动画效果。通过遵循这些步骤和技巧，用户可以轻松地在PowerPoint中设置图片逐一出现，从而提升演示文稿的视觉效果并吸引观众的注意力。

VGN 联名《艾尔登法环》键鼠系列产品上架：菈妮 / 褪色者定制主题，首发 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息，VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品，包含键盘、鼠标和鼠标垫，采用菈妮/褪色者定制主题设计，目前系列产品已上架京东，售价99元起。本站附联名新品信息如下：VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳，辅以五层消音结构，使用GASKET板簧结构，拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板；支持三模连接和SMARTSPEEDX低延迟技术；接入VHUB，可一站式管理多款设备，首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题