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


Posted in Javascript onJuly 27, 2015

本文实例讲述了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实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
Prototype Class对象学习
Jul 19 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
Jul 06 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
Node学习记录之cluster模块
May 31 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 #Javascript
javascript实现类似百度分享功能的方法
Jul 27 #Javascript
纯js模拟div层弹性运动的方法
Jul 27 #Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 #Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 #Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 #Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 #Javascript
You might like
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
php curl_init函数用法
2014/01/31 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python实现图片中文字分割效果
2019/07/22 Python
django如何自己创建一个中间件
2019/07/24 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python中bisect的使用方法
2019/12/31 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
英语演讲稿范文
2014/01/03 职场文书
毕业自我评价
2014/02/05 职场文书
品牌服务方案
2014/06/03 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript