jQuery效果高亮显示案例

╰+攻爆jí腚メ 2023-07-03 12:17 21阅读 0赞

## 一、设计思路 ##

> 高亮显示案例，主要是对之前的jQuery效果做的巩固。它的主要思路是当点击其中一个图片时，其他的图片都变暗。主要是一个大盒子里面放着许多小的li。通过改变他们之间的透明度来实现效果。

## 二、代码 ##

**css**

*{ 
    				margin: 0;
    				padding: 0;
    				list-style: none;
    				text-decoration: none;
    			}
    			.wrap{ 
    				width: 676px;
    				height: 510px;
    				overflow: hidden;
    				background: black;
    			}
    			.wrap ul li{ 
    				height: 220px;
    				float: left;
    				border: 2px solid black;
    			}
    			.wrap img{ 
    				border: 0;
    				display: block;
    			}

**jQuery**

$(function(){ 
    				//鼠标进入时，其他的li标签透明度为0.5
    				$(".wrap li").hover(function(){ 
    					$(this).siblings().stop().fadeTo(400,0.5);
    				},function(){ 
    					//鼠标离开，其他li 透明度改为1
    					$(this).siblings().stop().fadeTo(400,1);
    				})
    			})

**html**

## 三、实现效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200206170832490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020020617085024.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0,size_16,color_FFFFFF,t_70