How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray

Home

Web Front-end

JS Tutorial

How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:48 PM

jquerypictureHighlightmouse

The example in this article describes how jQuery realizes that the current picture is highlighted when the mouse is moved and other pictures are grayed out. Share it with everyone for your reference. The details are as follows:

When the mouse slides over the current picture, it will be highlighted, and other pictures will turn gray. This web page special effect is often used by some shopping malls such as Taobao. When the user moves the mouse to a certain picture, it will lighten up and the surrounding pictures will turn gray, forming a contrast to increase the user experience
The principle of this jquery special effect is: slide the mouse over the current element, find its sibling element i, and add the opacity_bg class to it, move the mouse out of the current element, go to its sibling element i, and remove it and add the opacity_bg class

The core js code is as follows:

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

The operation effect is as shown below:

The code is as follows:

<!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/imghwm/default1.png"  data-src="images/120913/1-120913133035250.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120829/1-120R9101014R2.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120830/1-120S01F5505H.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120819/1-120Q9144053630.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
  <li><a><img  src="/static/imghwm/default1.png"  data-src="images/120913/1-120913133035250.jpg"  class="lazy" / alt="How to implement jQuery to highlight the current picture when the mouse slides it and make other pictures gray_jquery" ></a><i class="this_bg"></i></li>
 </ul>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn