今天来教大家制作图片突出的显示效果
下面是我今天教的案例
这里我们要用到jQuery里面的鼠标移入事件和鼠标移出事件
大概就是鼠标移入一个图片其他图片变暗这样一个效果
图片大家自选
下面我把源代码放出来给大家看看
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<styletype="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100pxauto0;
width: 630px;
height: 394px;
padding: 10px0010px;
background: #000;
overflow: hidden;
border: 1pxsolid#fff;
}
.wrapli {
float: left;
margin: 010px10px0;
}
.wrapimg {
width: 200px;
height: 186px;
display: block;
border: 0;
}
</style>
<scriptsrc="./jquery-1.12.2.js"></script>
<script>
$(function(){
// 获取所有的li,添加鼠标进入事件
$(".wrap>ul>li").mouseenter(function(){
// 设置当前li的透明度,同时修改当前li的所有兄弟元素li的透明度
$(this).css("opacity",1).siblings().css("opacity",0.5);
});
// 鼠标离开事件
$(".wrap").mouseleave(function(){
// 从当前的div中找到所有的li,设置透明度
// find("值") 找到当前父级元素下面的子元素值:子元素,孙子元素
$(this).find("li").css("opacity",1);
})
})
</script>
</head>
<body>
<divclass="wrap">
<ul>
<li><ahref="#"><imgsrc="images/01.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/02.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/03.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/04.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/05.jpg"alt=""/></a></li>
<li><ahref="#"><imgsrc="images/06.jpg"alt=""/></a></li>
</ul>
</div>
</body>
</html>
这些主要是js部分很重要
主要就用到了jQuery里的鼠标移出移入事件
然后降低透明度就可以了
下面是效果图
6323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
