图片高亮显示在页面中很常见,下面是用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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理