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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
webpack自动打包和热更新的实现方法
Jun 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-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php mail to 配置详解
2014/01/16 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php中的依赖注入实例详解
2019/08/14 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
vue实现抖音时间转盘
2019/09/08 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python引用计数操作示例
2018/08/23 Python
python网络应用开发知识点浅析
2019/05/28 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
python使用配置文件过程详解
2019/12/28 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
元旦主持词开场白
2015/05/29 职场文书
德劲DE1108畅想
2021/04/22 无线电
mysql使用 not int 子查询隐含陷阱
2022/04/12 MySQL