失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > jQuery实现图片高亮显示

jQuery实现图片高亮显示

时间:2019-08-01 14:25:55

相关推荐

jQuery实现图片高亮显示

图片高亮显示在页面中很常见,下面是用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>

如果觉得《jQuery实现图片高亮显示》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。