jQuery实现图⽚⾼亮显⽰图⽚⾼亮显⽰在页⾯中很常见，下⾯是⽤jquery实现图⽚⾼亮显⽰的效果
html代码部分
<body>
<div>
/*添加图⽚*/
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
jquery在线图片<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
</div>
</body>
CSS代码部分
<style>
html{background:#000;}
div{
width:700px;
height:410px;
border:1px solid #ddd;
margin:50px auto;
padding:0 20px;
}
div img{
margin: 10px 10px 0 20px;
}
</style>
jQuery代码部分
<script>
// 给⼤盒⼦添加hover事件
$("div").hover(function(){
//  给每个img添加hover事件
$("img").hover(function(){
/
/ 给当前img添加动动画改变透明度
$(this).stop(true).animate({opacity:1},100)
$(this).siblings().stop(true).animate({opacity:.5})
})
})
// 当⿏标移开⼤盒⼦时添加动画改变透明度
$("div").mouseout(function(){
$("img").animate({opacity:1},100)
})
</script>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。