百度图片搜索页的图片展示列表模块jquery效果

<ul class="main">

    <li>

        <div class="li_div">

            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>

            <div class="tagbox">

                <ul class="tags">

                    <li class="tit"><a href="#">美女</a></li>

                    <li><a href="#">苍井空</a></li>

                    <li><a href="#">松岛枫</a></li>

                    <li><a href="#">范冰冰</a></li>

                    <li><a href="#">苍井空</a></li>

                    <li><a href="#">松岛枫</a></li>

                    <li><a href="#">范冰冰</a></li>

                </ul>

            </div>

        </div>

    </li>

    <li>

        <div class="li_div">

            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>

            <div class="tagbox">

                <ul class="tags">

                    <li class="tit"><a href="#">美女</a></li>

                    <li><a href="#">苍井空</a></li>

                    <li><a href="#">松岛枫</a></li>

                    <li><a href="#">范冰冰</a></li>

                </ul>

            </div>

        </div>

    </li>

    <li>

        <div class="li_div">

            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>

            <div class="tagbox">

                <ul class="tags">

                    <li class="tit"><a href="#">美女</a></li>

                    <li><a href="#">苍井空</a></li>

                    <li><a href="#">松岛枫</a></li>

                    <li><a href="#">范冰冰</a></li>

                </ul>

            </div>

        </div>

    </li>

    <li>

        <div class="li_div">

            <a href="#"><img src="1.jpg" width="100%" alt="" /></a>

            <div class="tagbox">

                <ul class="tags">

                    <li class="tit"><a href="#">美女</a></li>

                    <li><a href="#">苍井空</a></li>

                    <li><a href="#">松岛枫</a></li>

                    <li><a href="#">范冰冰</a></li>

                </ul>

            </div>

        </div>

    </li>

</ul>

*{ margin:0; padding:0; font-size:12px;}

img{ border:0;}

ul{ list-style:none;}

.main{ width:300px; height:180px; margin:20px auto;}

.main li{ position:relative; float:left; width:150px; height:90px; background:#000;}

.li_div{ position:absolute; width:150px; height:90px; overflow:hidden;}

.cur{ z-index:100; box-shadow:0 0 5px #000;}

.cur img{ opacity:1; *filter:alpha(opacity=100);}

.not_cur{ opacity:.5; *filter:alpha(opacity=50);}

.tagbox{ position:absolute; left:0; bottom:0; width:46px; height:21px; overflow:hidden; border-radius:0 11px 11px 0; background:#252525; opacity:.5; *filter:alpha(opacity=50);}

.tags{ display:block; width:100%; height:21px; overflow:hidden; color:#f7f7f7;}

.tags li{ float:left; width:42px; text-align:center; background:transparent;}

.tags a{ display:block; line-height:21px; color:#f7f7f7; text-decoration:none; padding:0 3px;}

.tags li.tit{ width:65px; text-align:left;}

.tags li.tit a{ padding:0 10px; font-weight:bold;}

$(function(){

    $(".li_div").each(function(i, target){

        $(target).mouseenter(function(e){

            //stop current animation

            $(target).stop();

            $(target).find(".tagbox").stop(false, true);

            $(target).parent().addClass("cur");

            $(".li_div").not($(target)).addClass("not_cur");

            $(target).find(".tagbox").animate({width:"211px"}, "normal");

            $(target).animate({width:"200px", height:"120px",top:"-15px",left:"-25px"},"normal");

        });

        $(target).mouseleave(function(e){

            $(target).stop();

            $(target).find(".tagbox").stop(false, true);

            $(target).parent().removeClass("cur");

            $(".li_div").not($(target)).removeClass("not_cur");

            $(target).find(".tagbox").animate({width:"46px"}, "normal");

            $(target).animate({ width:"150px", height:"90px", top:"0", left:"0"}, "normal");

        });

    });

});

point：

* 使用了jquery的mouseenter，mouseleave方法，避免了事件冒泡可能出现的冲突

* 图片外框使用relative，图片实际模块absolute到（实际放大图片-初始图片）/2的left和top的负值来实现绝对居中

* ie6-8还有border-radius圆角无法实现，猜测百度应该是hack一张圆角背景图片的

* 百度上是底色白色的，这样非焦点图片有很淡很模糊的效果，我增加li外框大块元素底色为黑色，这样的话非当前图片的时候0.5的透明度衬合黑色底色刚好突出当前的高亮

原文转至：百度图片搜索效果