图片高亮显示在页面中很常见，下面是用jquery实现图片高亮显示的效果，鼠标移动动某个图片上，则这个图片高亮显示。
7 t3 |, H% q) s1 r0 j' N+ J
- O, N8 u, [* Z% y8 F$ d, d" F7 uhtml代码部分) j! z7 T l$ x# H% F7 m: p# O7 `
<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代码部分9 { T1 k8 _$ @- E; t* o @" |8 c7 Z
<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代码部分
/ C( u7 B! q: i( j<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>
| 
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2021-10-21 12:25:09