图片高亮显示在页面中很常见，下面是用Jquery实现图片高亮显示的效果 html代码部分 <body> <div> <img src=
图片高亮显示在页面中很常见，下面是用Jquery实现图片高亮显示的效果
html代码部分
<body>
<div>
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<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>--结束END--
本文标题: jQuery实现图片高亮显示
本文链接: https://www.lsjlt.com/news/155067.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0