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>jquery聚光灯效果----无效果请刷新</h1>
 <h4>鼠标滑向当前图片高亮显示，其它图片变灰</h4>
 <ul>
  <li><a><img src="images/120913/1-120913133035250.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120829/1-120R9101014R2.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120830/1-120S01F5505H.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120819/1-120Q9144053630.jpg" /></a><i class="this_bg"></i></li>
  <li><a><img src="images/120913/1-120913133035250.jpg" /></a><i class="this_bg"></i></li>
 </ul>
</body>
</html>

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

赞 (0)

相关推荐

  • jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c

  • jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    js代码:  css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

  • jQuery实现点击弹出背景变暗遮罩效果实例代码

    jQuery实现点击弹出背景变暗遮罩效果实例代码

    本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&

  • jQuery实现鼠标经过图片变亮其他变暗效果

    以下是完整源代码: <!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=&quo

  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • jQuery实现鼠标滑过遮罩并高亮显示效果

    jQuery实现鼠标滑过遮罩并高亮显示效果

    复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标滑过遮罩高亮效果</title> <style> *{padding:0;margin:0;} ul,li

  • jQuery插件jFade实现鼠标经过的图片高亮其它变暗

    今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用,当鼠标经过图片列表或是文字列表时悬停当前高亮显示,其它图片列表变暗突出显示鼠标当前悬停. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

    本文实例讲述了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法.分享给大家供大家参考.具体如下: 鼠标滑向当前图片高亮显示,其它图片变灰 这个 网页特效一些商城经常用到比如淘宝,当用户鼠标移到某一个图片时候变亮 周围图片变灰,形成对比增加用户体验 这个jquery特效的原理是:鼠标滑过当前元素,找到他的同辈元素i,并为它加上opacity_bg类,鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景 核心js代码如下: $(document).ready(fun

  • jquery实现鼠标滑过后动态图片提示效果实例

    jquery实现鼠标滑过后动态图片提示效果实例

    本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {

  • jQuery实现鼠标滑过预览图片大图效果的方法

    本文实例讲述了jQuery实现鼠标滑过预览图片大图效果的方法.分享给大家供大家参考,具体如下: 需求是这样的:  鼠标移动的图片上,同时显示预览的大图,鼠标移开,则隐藏. 原理其实很简单,首先需要一个div , 然后动态通过jQuery方法添加<img>标签,改变这个<img>的样式(宽,高),以及需要显示的图片路径. js代码: $(function(){ var ei = $("#large"); ei.hide(); $("#img1, img&

  • jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

  • jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

    jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

    本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能.分享给大家供大家参考,具体如下: 1 . 效果截图 2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery图片变换</title> </head> <style type="text/css"

  • jquery实现鼠标滑过显示提示框的方法

    jquery实现鼠标滑过显示提示框的方法

    本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加  jquery.js.按钮图片.提示框图片  ) HTML 代码 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • 使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    使用jquery实现鼠标滑过弹出更多相关信息层附源码下载

    当要在有限的空间展示更多的信息时,我们经常会采取鼠标滑过弹出更多相关信息层,提高互动性.尤其可以应用在公司照片墙.招聘网站求职者信息展示等等场景. 本文结合实例和大家分享下使用jQuery实现滑过图片展示信息效果.当鼠标滑向照片时,会弹出对应的照片的详细介绍信息,请看演示效果: 效果展示     源码下载 HTML 首先我们准备页面素材,页面上由多组图片<li>密集组成,同时有图片对应的相关说明信息,用于展示详细信息效果. <div class="demo">

  • jquery实现鼠标滑过小图查看大图的方法

    本文实例讲述了jquery实现鼠标滑过小图查看大图的方法.分享给大家供大家参考.具体实现方法如下: 1. CSS部分: <style type="text/css"> ul{ list-style:none; } li{ float:left; margin-left:10px; } img{ border:#CCCCCC solid 1px; } #max{ position:absolute; display:none; /*隐藏层*/ } </style>

  • jquery实现鼠标滑过显示二级下拉菜单效果

    jquery实现鼠标滑过显示二级下拉菜单效果

    本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的下拉菜单,当鼠标移在主菜单上的时候,向下滑出二级子菜单,采用UL LI结构,便于修改完善,我觉得是很实用的菜单,希望大家平时能用得上. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-menu-codes/ 具体代码如下: <!DOCTYPE html> <head>

  • jQuery实现鼠标滑过Div层背景变颜色的方法

    本文实例讲述了jQuery实现鼠标滑过Div层背景变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>jQuery实现感应鼠标经过Div层变换图层背景颜色)</title> <style type="text/css"> .divbox{   height:300px;   width:200px;   background:#ffffff;   border

随机推荐