焦点图片效果

鼠标移到一个元素上,其他元素变黑,显得此元素很亮,鼠标移出,都变成明亮效果

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jquery效果</title>

<style type="text/css">

    #box{

        width:800px;

        height: 148px;

        background:black;

    }

    #box img{

        float: left;

    }

</style>

<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$(function(){

    $('#box img').mouseover(function(){//鼠标移入事件

        $(this).fadeTo(0,1);//0时间透明度为1

        $(this).siblings('img').fadeTo(0,0.7);//让移入元素的兄弟元素透明度变为0.7,背景颜色为黑色,所以看起来会变暗

    })

    $('#box img').mouseout(function(){//鼠标移出

        $(this).fadeTo(0,1);//让所有的透明度为1

    })

})

    

</script>

</head>

<body>

 <div id="box">

     <img src="img2/1.jpg" alt="">

     <img src="img2/2.jpg" alt="">

     <img src="img2/3.jpg" alt="">

     <img src="img2/4.jpg" alt="">

 </div>   

</body>

</html>

 

你可能感兴趣的:(图片)