jQuery如何制作图片选中高亮显示效果，方法是什么-群英

上一篇：用jQuery怎么制作简单的表单验证，代码是什么下一篇：如何实现打包非JS静态资源，使用的工具及方法是什么

关于“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如何制作图片选中高亮显示效果，方法是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。