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 相关文章推荐
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
一个JS翻页效果
2007/07/23 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
js中url对象化管理分析
2017/12/29 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python使用LDAP做用户认证的方法
2019/06/20 Python
python add_argument()用法解析
2020/01/29 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
英文道歉信
2015/01/20 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs