jQuery邮票人 --＞ 案例

效果预览

html代码

<div class="wrap">
    <ul>
        <li>
            <a href="#"><img src="img/01.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="img/02.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="img/03.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="img/04.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="img/05.jpg" alt=""/></a>
        </li>
        <li>
            <a href="#"><img src="img/06.jpg" alt=""/></a>
        </li>
    </ul>
</div>

css代码

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        body {
            background: #000;
        }

        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }

        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }

        .wrap img {
            display: block;
            border: 0;
        }
    </style>

js代码

<script>
    $(function () {
        //鼠标经过的时候，让自己的透明度为1，其余为0.5
        $(".wrap li").hover(function () {
            $(this).stop().fadeTo(300,1).siblings().stop().fadeTo(300,0.4)
        }, function () {
            //鼠标离开的时候，所有图片透明度恢复为1
            $(".wrap li").stop().fadeTo(300,1)
        })
    })
</script>