脚本宝典收集整理的这篇文章主要介绍了jQuery实现图片高亮显示,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
图片高亮显示在页面中很常见,下面是用jquery实现图片高亮显示的效果
htML代码部分
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实现图片高亮显示全部内容,希望文章能够帮你解决jQuery实现图片高亮显示所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。